Merge pull request #128 from domsew/monaco-editor-webpack-plugin-example

Add monaco-editor-webpack-plugin-example
2026-05-19 04:08:48 +00:00 · 2021-11-15 17:03:45 +01:00 · 2021-11-15 17:03:45 +01:00 · f2948443e1
commit f2948443e1
parent 4f06c90e34 ed001fdc1c
7 changed files with 247 additions and 34 deletions
--- a/examples/monaco-editor-webpack-plugin/README.md
+++ b/examples/monaco-editor-webpack-plugin/README.md
@ -0,0 +1,14 @@
+# 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).
+To start it, simply run:
+
+```sh
+npm start
+```
+
+The demo will open in your browser.
--- a/examples/monaco-editor-webpack-plugin/editor.js
+++ b/examples/monaco-editor-webpack-plugin/editor.js
@ -0,0 +1,7 @@
+// eslint-disable-next-line import/extensions
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+
+// eslint-disable-next-line import/extensions
+export { editor } from 'monaco-editor/esm/vs/editor/editor.api.js';
+export { setDiagnosticsOptions } from 'monaco-yaml';
+export default monaco;
--- a/examples/monaco-editor-webpack-plugin/index.html
+++ b/examples/monaco-editor-webpack-plugin/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Monaco Editor Webpack Plugin Example</title>
+    <style>
+      .editor {
+        width: 800px;
+        height: 600px;
+        border: 1px solid #ccc;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="editor"></div>
+    <script src="index.js" type="module"></script>
+  </body>
+</html>
--- a/examples/monaco-editor-webpack-plugin/index.js
+++ b/examples/monaco-editor-webpack-plugin/index.js
@ -0,0 +1,17 @@
+const value = `
+number: 0xfe
+boolean: true
+`;
+
+async function create() {
+  // eslint-disable-next-line import/extensions
+  const monaco = await import('./main.js');
+
+  monaco.editor.create(document.querySelector('.editor'), {
+    language: 'yaml',
+    tabSize: 2,
+    value,
+  });
+}
+
+create();
--- a/examples/monaco-editor-webpack-plugin/package.json
+++ b/examples/monaco-editor-webpack-plugin/package.json
@ -0,0 +1,20 @@
+{
+  "name": "monaco-editor-webpack-plugin-example",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "webpack serve --open --mode development",
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "monaco-editor": "^0.30.0",
+    "monaco-yaml": "file:../..",
+    "css-loader": "^6.0.0",
+    "style-loader": "^3.0.0",
+    "monaco-editor-webpack-plugin": "^6.0.0",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^4.0.0"
+  }
+}
--- a/examples/monaco-editor-webpack-plugin/webpack.config.js
+++ b/examples/monaco-editor-webpack-plugin/webpack.config.js
@ -0,0 +1,58 @@
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+
+export default {
+  entry: './editor.js',
+  output: {
+    filename: '[name].js',
+    library: {
+      type: 'module',
+    },
+    clean: true,
+  },
+  target: 'es2020',
+  experiments: {
+    outputModule: true,
+  },
+  devtool: 'source-map',
+  resolve: {
+    fallback: {
+      // Yaml-ast-parser-custom-tags imports buffer. This can be omitted safely.
+      buffer: false,
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.ttf$/,
+        type: 'asset',
+      },
+    ],
+  },
+  plugins: [
+    new MonacoWebpackPlugin({
+      languages: [],
+      customLanguages: [
+        {
+          label: 'yaml',
+          entry: [
+            'monaco-yaml/lib/esm/monaco.contribution',
+            'vs/basic-languages/yaml/yaml.contribution',
+          ],
+          worker: {
+            id: 'monaco-yaml/lib/esm/yamlWorker',
+            entry: 'monaco-yaml/lib/esm/yaml.worker',
+          },
+        },
+      ],
+    }),
+  ],
+  devServer: {
+    static: {
+      directory: './',
+    },
+  },
+};
--- a/package-lock.json
+++ b/package-lock.json
@ -55,6 +55,20 @@
        "webpack-dev-server": "^4.0.0"
      }
    },
+    "examples/monaco-editor-webpack-plugin": {
+      "name": "monaco-editor-webpack-plugin-example",
+      "version": "1.0.0",
+      "dependencies": {
+        "css-loader": "^6.0.0",
+        "monaco-editor": "^0.30.0",
+        "monaco-editor-webpack-plugin": "^6.0.0",
+        "monaco-yaml": "file:../..",
+        "style-loader": "^3.0.0",
+        "webpack": "^5.0.0",
+        "webpack-cli": "^4.0.0",
+        "webpack-dev-server": "^4.0.0"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.12.11",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
@ -1076,18 +1090,18 @@
      }
    },
    "node_modules/@webpack-cli/configtest": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.4.tgz",
-      "integrity": "sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz",
+      "integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==",
      "peerDependencies": {
        "webpack": "4.x.x || 5.x.x",
        "webpack-cli": "4.x.x"
      }
    },
    "node_modules/@webpack-cli/info": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.3.0.tgz",
-      "integrity": "sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz",
+      "integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==",
      "dependencies": {
        "envinfo": "^7.7.3"
      },
@ -1096,9 +1110,9 @@
      }
    },
    "node_modules/@webpack-cli/serve": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.5.2.tgz",
-      "integrity": "sha512-vgJ5OLWadI8aKjDlOH3rb+dYyPd2GTZuQC/Tihjct6F9GpXGZINo3Y/IVuZVTM1eDQB+/AOsjPUWH/WySDaXvw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz",
+      "integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==",
      "peerDependencies": {
        "webpack-cli": "4.x.x"
      },
@ -1368,6 +1382,14 @@
      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@ -1940,9 +1962,9 @@
      }
    },
    "node_modules/css-loader": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.2.0.tgz",
-      "integrity": "sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.5.0.tgz",
+      "integrity": "sha512-VmuSdQa3K+wJsl39i7X3qGBM5+ZHmtTnv65fqMGI+fzmHoYmszTVvTqC1XN8JwWDViCB1a8wgNim5SV4fb37xg==",
      "dependencies": {
        "icss-utils": "^5.1.0",
        "postcss": "^8.2.15",
@ -2391,6 +2413,14 @@
      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
      "dev": true
    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
    "node_modules/encodeurl": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@ -2400,9 +2430,9 @@
      }
    },
    "node_modules/enhanced-resolve": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz",
-      "integrity": "sha512-F27oB3WuHDzvR2DOGNTaYy0D5o0cnrv8TeI482VM4kYgQd/FT9lUQwuNsJ0oOHtBUq7eiW5ytqzp7nBFknL+GA==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz",
+      "integrity": "sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==",
      "dependencies": {
        "graceful-fs": "^4.2.4",
        "tapable": "^2.2.0"
@ -2484,9 +2514,9 @@
      }
    },
    "node_modules/es-module-lexer": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.7.1.tgz",
-      "integrity": "sha512-MgtWFl5No+4S3TmhDmCz2ObFGm6lEpTnzbQi+Dd+pw4mlTIZTmM2iAs5gRlmx5zS9luzobCSBSI90JM/1/JgOw=="
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
    },
    "node_modules/es-to-primitive": {
      "version": "1.2.1",
@ -4888,8 +4918,6 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-      "dev": true,
-      "peer": true,
      "dependencies": {
        "minimist": "^1.2.5"
      },
@ -5028,6 +5056,19 @@
        "node": ">=6.11.5"
      }
    },
+    "node_modules/loader-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+      "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
    "node_modules/locate-path": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -5404,6 +5445,22 @@
      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.30.1.tgz",
      "integrity": "sha512-B/y4+b2O5G2gjuxIFtCE2EkM17R2NM7/3F8x0qcPsqy4V83bitJTIO4TIeZpYlzu/xy6INiY/+84BEm6+7Cmzg=="
    },
+    "node_modules/monaco-editor-webpack-plugin": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-6.0.0.tgz",
+      "integrity": "sha512-vC886Mzpd2AkSM35XLkfQMjH+Ohz6RISVwhAejDUzZDheJAiz6G34lky1vyO8fZ702v7IrcKmsGwL1rRFnwvUA==",
+      "dependencies": {
+        "loader-utils": "^2.0.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": "0.30.x",
+        "webpack": "^4.5.0 || 5.x"
+      }
+    },
+    "node_modules/monaco-editor-webpack-plugin-example": {
+      "resolved": "examples/monaco-editor-webpack-plugin",
+      "link": true
+    },
    "node_modules/monaco-yaml": {
      "resolved": "",
      "link": true
@ -7696,6 +7753,21 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
    "node_modules/stylehacks": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
@ -8165,7 +8237,8 @@
    "node_modules/v8-compile-cache": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
-      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
    },
    "node_modules/validate-npm-package-license": {
      "version": "3.0.4",
@ -8297,9 +8370,9 @@
      }
    },
    "node_modules/webpack": {
-      "version": "5.51.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.51.2.tgz",
-      "integrity": "sha512-odydxP4WA3XYYzwSQUivPxywdzMlY42bbfxMwCaEtHb+i/N9uzKSHcLgWkXo/Gsa+4Zlzf3Jg0hEHn1FnZpk2Q==",
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.60.0.tgz",
+      "integrity": "sha512-OL5GDYi2dKxnwJPSOg2tODgzDxAffN0osgWkZaBo/l3ikCxDFP+tuJT3uF7GyBE3SDBpKML/+a8EobyWAQO3DQ==",
      "dependencies": {
        "@types/eslint-scope": "^3.7.0",
        "@types/estree": "^0.0.50",
@ -8310,8 +8383,8 @@
        "acorn-import-assertions": "^1.7.6",
        "browserslist": "^4.14.5",
        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.8.0",
-        "es-module-lexer": "^0.7.1",
+        "enhanced-resolve": "^5.8.3",
+        "es-module-lexer": "^0.9.0",
        "eslint-scope": "5.1.1",
        "events": "^3.2.0",
        "glob-to-regexp": "^0.4.1",
@ -8343,22 +8416,21 @@
      }
    },
    "node_modules/webpack-cli": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.8.0.tgz",
-      "integrity": "sha512-+iBSWsX16uVna5aAYN6/wjhJy1q/GKk4KjKvfg90/6hykCTSgozbfz5iRgDTSJt/LgSbYxdBX3KBHeobIs+ZEw==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz",
+      "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==",
      "dependencies": {
        "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.0.4",
-        "@webpack-cli/info": "^1.3.0",
-        "@webpack-cli/serve": "^1.5.2",
-        "colorette": "^1.2.1",
+        "@webpack-cli/configtest": "^1.1.0",
+        "@webpack-cli/info": "^1.4.0",
+        "@webpack-cli/serve": "^1.6.0",
+        "colorette": "^2.0.14",
        "commander": "^7.0.0",
        "execa": "^5.0.0",
        "fastest-levenshtein": "^1.0.12",
        "import-local": "^3.0.2",
        "interpret": "^2.2.0",
        "rechoir": "^0.7.0",
-        "v8-compile-cache": "^2.2.0",
        "webpack-merge": "^5.7.3"
      },
      "bin": {
@ -8385,6 +8457,11 @@
        }
      }
    },
+    "node_modules/webpack-cli/node_modules/colorette": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g=="
+    },
    "node_modules/webpack-dev-middleware": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.0.0.tgz",