diff --git a/examples/monaco-editor-webpack-plugin/README.md b/examples/monaco-editor-webpack-plugin/README.md new file mode 100644 index 0000000..c0023a7 --- /dev/null +++ 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. diff --git a/examples/monaco-editor-webpack-plugin/editor.js b/examples/monaco-editor-webpack-plugin/editor.js new file mode 100644 index 0000000..238aa0d --- /dev/null +++ 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; diff --git a/examples/monaco-editor-webpack-plugin/index.html b/examples/monaco-editor-webpack-plugin/index.html new file mode 100644 index 0000000..0f3cb40 --- /dev/null +++ b/examples/monaco-editor-webpack-plugin/index.html @@ -0,0 +1,20 @@ + + + + + + + Monaco Editor Webpack Plugin Example + + + +
+ + + diff --git a/examples/monaco-editor-webpack-plugin/index.js b/examples/monaco-editor-webpack-plugin/index.js new file mode 100644 index 0000000..ba237e0 --- /dev/null +++ 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(); diff --git a/examples/monaco-editor-webpack-plugin/package.json b/examples/monaco-editor-webpack-plugin/package.json new file mode 100644 index 0000000..39cc391 --- /dev/null +++ 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" + } +} diff --git a/examples/monaco-editor-webpack-plugin/webpack.config.js b/examples/monaco-editor-webpack-plugin/webpack.config.js new file mode 100644 index 0000000..47f4009 --- /dev/null +++ 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: './', + }, + }, +}; diff --git a/package-lock.json b/package-lock.json index 8e7a8b5..c4f105c 100644 --- 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",