Rename to /samples/

2025-12-22 08:10:11 +01:00 · 2021-11-16 22:01:05 +01:00 · 2021-11-16 22:01:05 +01:00 · 091f871e65
commit 091f871e65
parent c9081ee4f3
85 changed files with 12 additions and 15 deletions
--- a/samples/README.md
+++ b/samples/README.md
@ -0,0 +1,35 @@
+# Monaco Editor Samples
+
+Standalone HTML samples showing how to integrate the Monaco Editor.
+
+## Running
+
+```bash
+git clone https://github.com/microsoft/monaco-editor.git
+cd samples
+npm install .
+npm run simpleserver
+```
+
+Go to <a href="http://localhost:8888">localhost:8888</a> and explore the samples!
+
+## Loading variations
+
+- `browser-amd-editor`: running in a browser using `AMD` lazy loading.
+- `browser-script-editor`: running in a browser using `AMD` synchronous loading via `<script>` tags.
+- `browser-esm-webpack`: running in a browser using webpack.
+- `browser-esm-webpack-small`: running in a browser using webpack (only a subset of the editor).
+- `electron-amd`: running in electron.
+- `nwjs-amd` and `nwjs-amd-v2`: running in nwjs. it is reported that v2 works and the initial version does not.
+
+## Other examples & techniques
+
+- `browser-amd-diff-editor`: running the diff editor in a browser.
+- `browser-amd-iframe`: running in an `<iframe>`.
+- `browser-amd-localized`: running with the `German` locale.
+- `browser-amd-monarch`: running with a custom language grammar written with Monarch.
+- `browser-amd-shared-model`: using the same text model in two editors.
+
+## License
+
+MIT
--- a/samples/browser-amd-diff-editor/index.html
+++ b/samples/browser-amd-diff-editor/index.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Diff Editor Sample</h2>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
+
+		<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+		<script>
+			require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
+
+			require(['vs/editor/editor.main'], function () {
+				var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
+
+				Promise.all([xhr('original.txt'), xhr('modified.txt')]).then(function (r) {
+					var originalTxt = r[0].responseText;
+					var modifiedTxt = r[1].responseText;
+
+					diffEditor.setModel({
+						original: monaco.editor.createModel(originalTxt, 'javascript'),
+						modified: monaco.editor.createModel(modifiedTxt, 'javascript')
+					});
+				});
+			});
+		</script>
+		<script>
+			function xhr(url) {
+				var req = null;
+				return new Promise(
+					function (c, e) {
+						req = new XMLHttpRequest();
+						req.onreadystatechange = function () {
+							if (req._canceled) {
+								return;
+							}
+
+							if (req.readyState === 4) {
+								if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
+									c(req);
+								} else {
+									e(req);
+								}
+								req.onreadystatechange = function () {};
+							}
+						};
+
+						req.open('GET', url, true);
+						req.responseType = '';
+
+						req.send(null);
+					},
+					function () {
+						req._canceled = true;
+						req.abort();
+					}
+				);
+			}
+		</script>
+	</body>
+</html>
--- a/samples/browser-amd-diff-editor/modified.txt
+++ b/samples/browser-amd-diff-editor/modified.txt
@ -0,0 +1,74 @@
+
+/// <reference path="../../references.js" />
+(function () {
+	"use strict";
+	
+	var deltaDecorations = function (oldDecorations, newDecorations) {
+		/// <summary>
+		///   Update oldDecorations to match newDecorations.
+		///   It will remove old decorations which are not found in new decorations
+		///   and add only the really new decorations.
+		/// </summary>
+		/// <param name="oldDecorations" type="Array">
+		///   An array containing ids of existing decorations
+		/// </param>
+		/// <param name="newDecorations" type="Array">
+		///   An array containing literal objects describing new decorations. A
+		///   literal contains the following two fields:
+		///      range
+		///      options
+		/// </param>
+		/// <returns type="Array">
+		///   Returns an array of decorations ids
+		/// </returns>
+		var hashFunc = function (range, options) {
+			return range.startLineNumber + "," + range.startColumn + "-" + range.endLineNumber + "," + range.endColumn +
+				"-" + options.hoverMessage + "-" + options.className + "-" + options.isOverlay + "-" + options.showInOverviewRuler;
+		};
+		return this.changeDecorations(function (changeAccessor) {
+			var i, len, oldDecorationsMap = {}, hash;
+			
+			// Record old decorations in a map
+			// Two decorations can have the same hash
+			for (i = 0, len = oldDecorations.length; i < len; i++) {
+				hash = hashFunc(this.getDecorationRange(oldDecorations[i]), this.getDecorationOptions(oldDecorations[i]));
+				oldDecorationsMap[hash] = oldDecorationsMap[hash] || [];
+				oldDecorationsMap[hash].push(oldDecorations[i]);
+			}
+			
+			// Add only new decorations & mark reused ones
+			var j, lenJ, result = [], usedOldDecorations = {}, oldDecorationsCandidates, reusedOldDecoration;
+			for (i = 0, len = newDecorations.length; i < len; i++) {
+				hash = hashFunc(newDecorations[i].range, newDecorations[i].options);
+				reusedOldDecoration = false;
+				if (oldDecorationsMap.hasOwnProperty(hash)) {
+					oldDecorationsCandidates = oldDecorationsMap[hash];
+					// We can try reusing an old decoration (if it hasn't been reused before)
+					for (j = 0, lenJ = oldDecorationsCandidates.length; j < lenJ; j++) {
+						if (!usedOldDecorations.hasOwnProperty(oldDecorationsCandidates[j])) {
+							// Found an old decoration which can be reused & it hasn't been reused before
+							reusedOldDecoration = true;
+							usedOldDecorations[oldDecorationsCandidates[j]] = true;
+							result.push(oldDecorationsCandidates[j]);
+							break;
+						}
+					}
+				}
+				
+				if (!reusedOldDecoration) {
+					result.push(changeAccessor.addDecoration(newDecorations[i].range, newDecorations[i].options));
+				}
+			}
+			
+			// Remove unused old decorations
+			for (i = 0, len = oldDecorations.length; i < len; i++) {
+				if (!usedOldDecorations.hasOwnProperty(oldDecorations[i])) {
+					changeAccessor.removeDecoration(oldDecorations[i]);
+				}
+			}
+			
+			return result;
+		}.bind(this));
+	};
+
+})();
--- a/samples/browser-amd-diff-editor/original.txt
+++ b/samples/browser-amd-diff-editor/original.txt
@ -0,0 +1,61 @@
+/// <reference path="../../references.js" />
+(function () {
+	"use strict";
+	
+	// Some useless comment
+	
+	var deltaDecorations = function (oldDecorations, newDecorations) {
+		/// <summary>
+		///   Update oldDecorations to match newDecorations.
+		///   It will remove old decorations which are not found in new decorations
+		///   and add only the really new decorations.
+		/// </summary>
+		/// <param name="oldDecorations" type="Array">
+		///   An array containing ids of existing decorations
+		/// </param>
+		/// <param name="newDecorations" type="Array">
+		///   An array containing literal objects describing new decorations. A
+		///   literal contains the following two fields:
+		///      range
+		///      options
+		/// </param>
+		/// <returns type="Array">
+		///   Returns an array of decorations ids
+		/// </returns>
+		var hashFunc = function (range, options) {
+			return range.startLineNumber + "," + range.startColumn + "-" + range.endLineNumber + "," + range.endColumn +
+				"-" + options.hoverMessage + "-" + options.className + "-" + options.isOverlay + "-" + options.showInOverviewRuler;
+		};
+		return this.changeDecorations(function (changeAccessor) {
+			var i, len, oldDecorationsMap = {}, hash;
+				
+			// Record old decorations in a map
+			for (i = 0, len = oldDecorations.length; i < len; i++) {
+				hash = hashFunc(this.getDecorationRange(oldDecorations[i]), this.getDecorationOptions(oldDecorations[i]));
+				oldDecorationsMap[hash] = i;
+			}
+			
+			// Add only new decorations & mark reused ones
+			var result = [], usedOldDecorationsMap = {};
+			for (i = 0, len = newDecorations.length; i < len; i++) {
+				hash = hashFunc(newDecorations[i].range, newDecorations[i].options);
+				if (oldDecorationsMap.hasOwnProperty(hash)) {
+					usedOldDecorationsMap[oldDecorationsMap[hash]] = true;
+					result.push(oldDecorations[oldDecorationsMap[hash]]);
+				} else {
+					result.push(changeAccessor.addDecoration(newDecorations[i].range, newDecorations[i].options));
+				}
+			}
+			
+			// Remove unused old decorations
+			for (i = 0, len = oldDecorations.length; i < len; i++) {
+				if (!usedOldDecorationsMap.hasOwnProperty(i)) {
+					changeAccessor.removeDecoration(oldDecorations[i]);
+				}
+			}
+			
+			return result;
+		}.bind(this));
+	};
+
+})();
--- a/samples/browser-amd-editor/index.html
+++ b/samples/browser-amd-editor/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>browser-amd-editor</title>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Sample</h2>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
+
+		<!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js -->
+		<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+		<script>
+			require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
+
+			require(['vs/editor/editor.main'], function () {
+				var editor = monaco.editor.create(document.getElementById('container'), {
+					value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+					language: 'javascript'
+				});
+			});
+		</script>
+	</body>
+</html>
--- a/samples/browser-amd-iframe/index.html
+++ b/samples/browser-amd-iframe/index.html
@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Editor in tiny iframe</title>
+
+		<style>
+			#myIframe1 {
+				border: 1px solid blue;
+				width: 0;
+				height: 0;
+			}
+			#myIframe2 {
+				border: 1px solid red;
+				display: none;
+			}
+			#myIframe3 {
+				border: 1px solid green;
+				visibility: hidden;
+			}
+			#programmaticIframe {
+				border: 1px solid yellow;
+			}
+		</style>
+	</head>
+
+	<body>
+		<h2>Monaco Editor inside iframes sample</h2>
+
+		<br />
+		<br />
+		0x0:
+		<br />
+		<iframe id="myIframe1" src="inner.html"></iframe>
+		display:none:
+		<br />
+		<iframe id="myIframe2" src="inner.html"></iframe>
+		visibility:hidden:
+		<br />
+		<iframe id="myIframe3" src="inner.html"></iframe>
+		taken off-dom while loading:
+		<br />
+
+		<script>
+			var myIframe1 = document.getElementById('myIframe1');
+			var myIframe2 = document.getElementById('myIframe2');
+			var myIframe3 = document.getElementById('myIframe3');
+			var programmaticIframe = document.createElement('iframe');
+			programmaticIframe.id = 'programmaticIframe';
+			programmaticIframe.src = 'inner.html';
+			// trigger its loading & take it off dom
+			document.body.appendChild(programmaticIframe);
+
+			setTimeout(function () {
+				document.body.removeChild(programmaticIframe);
+			}, 10);
+
+			setTimeout(function () {
+				document.body.appendChild(programmaticIframe);
+				[myIframe1, myIframe2, myIframe3, programmaticIframe].forEach(reveal);
+			}, 3000);
+
+			function reveal(iframe) {
+				iframe.style.width = '400px';
+				iframe.style.height = '100px';
+				iframe.style.display = 'block';
+				iframe.style.visibility = 'visible';
+			}
+		</script>
+	</body>
+</html>
--- a/samples/browser-amd-iframe/inner.html
+++ b/samples/browser-amd-iframe/inner.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+		<style type="text/css">
+			html,
+			body {
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				padding: 0;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="container" style="width: 100%; height: 100%"></div>
+		<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+		<script>
+			require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
+
+			require(['vs/editor/editor.main'], function () {
+				var editor = monaco.editor.create(document.getElementById('container'), {
+					value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+					language: 'javascript'
+				});
+
+				window.onresize = function () {
+					editor.layout();
+				};
+			});
+		</script>
+	</body>
+</html>
--- a/samples/browser-amd-localized/index.html
+++ b/samples/browser-amd-localized/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Localization Sample</h2>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
+
+		<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+		<script>
+			require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
+
+			require.config({
+				'vs/nls': {
+					availableLanguages: {
+						'*': 'de'
+					}
+				}
+			});
+
+			require(['vs/editor/editor.main'], function () {
+				var editor = monaco.editor.create(document.getElementById('container'), {
+					value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+					language: 'javascript'
+				});
+			});
+		</script>
+	</body>
+</html>
--- a/samples/browser-amd-monarch/index.html
+++ b/samples/browser-amd-monarch/index.html
@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monarch Tokenizer Sample</h2>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
+
+		<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+		<script>
+			require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
+
+			require(['vs/editor/editor.main'], function () {
+				monaco.languages.register({
+					id: 'myCustomLanguage'
+				});
+				monaco.languages.setMonarchTokensProvider('myCustomLanguage', {
+					tokenizer: {
+						root: [
+							[/\[error.*/, 'custom-error'],
+							[/\[notice.*/, 'custom-notice'],
+							[/\[info.*/, 'custom-info'],
+							[/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
+						]
+					}
+				});
+
+				// Define a new theme that constains only rules that match this language
+				monaco.editor.defineTheme('myCoolTheme', {
+					base: 'vs',
+					inherit: false,
+					rules: [
+						{ token: 'custom-info', foreground: '808080' },
+						{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
+						{ token: 'custom-notice', foreground: 'FFA500' },
+						{ token: 'custom-date', foreground: '008800' }
+					]
+				});
+
+				var editor = monaco.editor.create(document.getElementById('container'), {
+					theme: 'myCoolTheme',
+					value: getCode(),
+					language: 'myCustomLanguage'
+				});
+			});
+
+			function getCode() {
+				return [
+					'[Sun Mar 7 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations',
+					'[Sun Mar 7 16:02:00 2004] [info] Server built: Feb 27 2004 13:56:37',
+					'[Sun Mar 7 16:02:00 2004] [notice] Accept mutex: sysvsem (Default: sysvsem)',
+					'[Sun Mar 7 16:05:49 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 16:45:56 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 17:13:50 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 17:21:44 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 17:23:53 2004] statistics: Use of uninitialized value in concatenation (.) or string at /home/httpd/twiki/lib/TWiki.pm line 528.',
+					"[Sun Mar 7 17:23:53 2004] statistics: Can't create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied",
+					'[Sun Mar 7 17:27:37 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 17:31:39 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 17:58:00 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 18:00:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 18:10:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 18:19:01 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 18:42:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 18:52:30 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 18:58:52 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 19:03:58 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 19:08:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 20:04:35 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 20:11:33 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 20:12:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 20:25:31 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 20:44:48 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome',
+					'[Sun Mar 7 21:20:14 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 21:31:12 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 21:39:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Sun Mar 7 21:44:10 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 01:35:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 01:47:06 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 01:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 02:12:24 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 02:54:54 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 03:46:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 03:48:18 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 03:52:17 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 03:55:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 04:22:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 04:24:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 04:40:32 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 04:55:40 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 04:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 05:22:57 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 05:24:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'[Mon Mar 8 05:31:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+					'<11>httpd[31628]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_inf.html in 29-Mar 15:18:20.50 from xx.xx.xx.xx',
+					'<11>httpd[25859]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_bin/shtml.exe/_vti_rpc in 29-Mar 15:18:20.54 from xx.xx.xx.xx'
+				].join('\n');
+			}
+		</script>
+	</body>
+</html>
--- a/samples/browser-amd-requirejs/index.html
+++ b/samples/browser-amd-requirejs/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Sample - Loading with requirejs</h2>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
+
+		<script
+			src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
+			integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
+			crossorigin="anonymous"
+		></script>
+		<script>
+			require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
+
+			require(['vs/editor/editor.main'], function () {
+				var editor = monaco.editor.create(document.getElementById('container'), {
+					value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+					language: 'javascript'
+				});
+			});
+		</script>
+	</body>
+</html>
--- a/samples/browser-amd-shadow-dom/index.html
+++ b/samples/browser-amd-shadow-dom/index.html
@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>browser-amd-editor</title>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+		<style>
+			/* We must define the font face outside the shadowroot */
+			@font-face {
+				font-family: 'codicon';
+				src: url('../node_modules/monaco-editor/min/vs/base/browser/ui/codicons/codicon/codicon.ttf')
+					format('truetype');
+			}
+		</style>
+	</head>
+	<body>
+		<h2>Monaco Editor Sample</h2>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
+
+		<!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js -->
+		<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+		<script>
+			require.config({
+				paths: { vs: '../node_modules/monaco-editor/min/vs' },
+				'vs/css': { disabled: true }
+			});
+
+			const container = document.getElementById('container');
+			const shadowRoot = container.attachShadow({
+				mode: 'closed'
+			});
+
+			const innerContainer = document.createElement('div');
+			shadowRoot.appendChild(innerContainer);
+			innerContainer.style.width = '800px';
+			innerContainer.style.height = '600px';
+
+			const innerStyle = document.createElement('style');
+			innerStyle.innerText =
+				'@import "../node_modules/monaco-editor/min/vs/editor/editor.main.css";';
+			shadowRoot.appendChild(innerStyle);
+
+			require(['vs/editor/editor.main'], function () {
+				const editor = monaco.editor.create(innerContainer, {
+					value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+					language: 'javascript'
+				});
+			});
+		</script>
+	</body>
+</html>
--- a/samples/browser-amd-shared-model/index.html
+++ b/samples/browser-amd-shared-model/index.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Shared Models Sample</h2>
+		<div id="container1" style="width: 400px; height: 200px; border: 1px solid grey"></div>
+		<div id="container2" style="width: 400px; height: 200px; border: 1px solid grey"></div>
+
+		<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+		<script>
+			require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
+
+			require(['vs/editor/editor.main'], function () {
+				var model = monaco.editor.createModel(
+					['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+					'javascript'
+				);
+				var editor1 = monaco.editor.create(document.getElementById('container1'), {
+					model: model
+				});
+				var editor2 = monaco.editor.create(document.getElementById('container2'), {
+					model: model
+				});
+			});
+		</script>
+	</body>
+</html>
--- a/samples/browser-amd-trusted-types/index.html
+++ b/samples/browser-amd-trusted-types/index.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>browser-amd-editor</title>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+		<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'" />
+	</head>
+	<body>
+		<h2>Monaco Editor with Trusted Types Sample</h2>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
+
+		<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+		<script>
+			// Allow monaco-editor to load scripts from its own paths only
+			var scriptLoadingPolicy = {
+				createScriptURL: function allowOnlyMonacoPaths(url) {
+					if (
+						url.indexOf('../node_modules/monaco-editor/min/vs/') === 0 &&
+						url.lastIndexOf('..') == 0
+					) {
+						return url;
+					}
+				}
+			};
+			// If browser supports Trusted Types, use them.
+			if (typeof trustedTypes !== 'undefined') {
+				scriptLoadingPolicy = trustedTypes.createPolicy('monaco-editor', scriptLoadingPolicy);
+			}
+			require.config({
+				paths: { vs: '../node_modules/monaco-editor/min/vs' },
+				trustedTypesPolicy: scriptLoadingPolicy
+			});
+
+			require(['vs/editor/editor.main'], function () {
+				var editor = monaco.editor.create(document.getElementById('container'), {
+					value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+					language: 'javascript'
+				});
+			});
+		</script>
+	</body>
+</html>
--- a/samples/browser-esm-parcel/.gitignore
+++ b/samples/browser-esm-parcel/.gitignore
@ -0,0 +1,2 @@
+dist/
+.cache
--- a/samples/browser-esm-parcel/index.html
+++ b/samples/browser-esm-parcel/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Parcel Bundler Sample</h2>
+
+		This sample shows how to load a small subset of the editor:
+		<ul>
+			<li>Only the core editor and the find widget</li>
+			<li>Only the json language coloring</li>
+		</ul>
+
+		To run this sample, you need to:
+
+		<pre>
+$/browser-esm-parcel> npm install .
+$/browser-esm-parcel> npm run build
+$/browser-esm-parcel> npm run simpleserver
+</pre
+		>
+
+		Then, open <a href="http://localhost:9999/">http://localhost:9999/</a>.
+	</body>
+</html>
--- a/samples/browser-esm-parcel/package-lock.json
+++ b/samples/browser-esm-parcel/package-lock.json
--- a/samples/browser-esm-parcel/package.json
+++ b/samples/browser-esm-parcel/package.json
@ -0,0 +1,17 @@
+{
+	"name": "helloworld",
+	"dependencies": {},
+	"scripts": {
+		"simpleserver": "node ../node_modules/yaserver/bin/yaserver --root ./dist --port 9999",
+		"build": "npm run build-index && npm run build-json && npm run build-css && npm run build-html && npm run build-ts && npm run build-worker",
+		"build-index": "parcel build src/index.html",
+		"build-json": "parcel build ../node_modules/monaco-editor/esm/vs/language/json/json.worker.js --no-source-maps",
+		"build-css": "parcel build ../node_modules/monaco-editor/esm/vs/language/css/css.worker.js --no-source-maps",
+		"build-html": "parcel build ../node_modules/monaco-editor/esm/vs/language/html/html.worker.js --no-source-maps",
+		"build-ts": "parcel build ../node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --no-source-maps",
+		"build-worker": "parcel build ../node_modules/monaco-editor/esm/vs/editor/editor.worker.js --no-source-maps"
+	},
+	"devDependencies": {
+		"parcel": "^1.12.4"
+	}
+}
--- a/samples/browser-esm-parcel/src/index.html
+++ b/samples/browser-esm-parcel/src/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
+
+		<script src="index.js"></script>
+	</body>
+</html>
--- a/samples/browser-esm-parcel/src/index.js
+++ b/samples/browser-esm-parcel/src/index.js
@ -0,0 +1,24 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
+
+self.MonacoEnvironment = {
+	getWorkerUrl: function (moduleId, label) {
+		if (label === 'json') {
+			return './json.worker.js';
+		}
+		if (label === 'css' || label === 'scss' || label === 'less') {
+			return './css.worker.js';
+		}
+		if (label === 'html' || label === 'handlebars' || label === 'razor') {
+			return './html.worker.js';
+		}
+		if (label === 'typescript' || label === 'javascript') {
+			return './ts.worker.js';
+		}
+		return './editor.worker.js';
+	}
+};
+
+monaco.editor.create(document.getElementById('container'), {
+	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+	language: 'javascript'
+});
--- a/samples/browser-esm-vite-react/.gitignore
+++ b/samples/browser-esm-vite-react/.gitignore
@ -0,0 +1,2 @@
+dist
+src/**/*.js
--- a/samples/browser-esm-vite-react/index.html
+++ b/samples/browser-esm-vite-react/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>browser-esm-vite-react</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
--- a/samples/browser-esm-vite-react/package-lock.json
+++ b/samples/browser-esm-vite-react/package-lock.json
@ -0,0 +1,874 @@
+{
+	"name": "browser-esm-vite-react",
+	"requires": true,
+	"lockfileVersion": 1,
+	"dependencies": {
+		"@babel/code-frame": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
+			"integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==",
+			"dev": true,
+			"requires": {
+				"@babel/highlight": "^7.16.0"
+			}
+		},
+		"@babel/compat-data": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.0.tgz",
+			"integrity": "sha512-DGjt2QZse5SGd9nfOSqO4WLJ8NN/oHkijbXbPrxuoJO3oIPJL3TciZs9FX+cOHNiY9E9l0opL8g7BmLe3T+9ew==",
+			"dev": true
+		},
+		"@babel/core": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.0.tgz",
+			"integrity": "sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==",
+			"dev": true,
+			"requires": {
+				"@babel/code-frame": "^7.16.0",
+				"@babel/generator": "^7.16.0",
+				"@babel/helper-compilation-targets": "^7.16.0",
+				"@babel/helper-module-transforms": "^7.16.0",
+				"@babel/helpers": "^7.16.0",
+				"@babel/parser": "^7.16.0",
+				"@babel/template": "^7.16.0",
+				"@babel/traverse": "^7.16.0",
+				"@babel/types": "^7.16.0",
+				"convert-source-map": "^1.7.0",
+				"debug": "^4.1.0",
+				"gensync": "^1.0.0-beta.2",
+				"json5": "^2.1.2",
+				"semver": "^6.3.0",
+				"source-map": "^0.5.0"
+			}
+		},
+		"@babel/generator": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz",
+			"integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==",
+			"dev": true,
+			"requires": {
+				"@babel/types": "^7.16.0",
+				"jsesc": "^2.5.1",
+				"source-map": "^0.5.0"
+			}
+		},
+		"@babel/helper-annotate-as-pure": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz",
+			"integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==",
+			"dev": true,
+			"requires": {
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-compilation-targets": {
+			"version": "7.16.3",
+			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.3.tgz",
+			"integrity": "sha512-vKsoSQAyBmxS35JUOOt+07cLc6Nk/2ljLIHwmq2/NM6hdioUaqEXq/S+nXvbvXbZkNDlWOymPanJGOc4CBjSJA==",
+			"dev": true,
+			"requires": {
+				"@babel/compat-data": "^7.16.0",
+				"@babel/helper-validator-option": "^7.14.5",
+				"browserslist": "^4.17.5",
+				"semver": "^6.3.0"
+			}
+		},
+		"@babel/helper-function-name": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz",
+			"integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-get-function-arity": "^7.16.0",
+				"@babel/template": "^7.16.0",
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-get-function-arity": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz",
+			"integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==",
+			"dev": true,
+			"requires": {
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-hoist-variables": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz",
+			"integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==",
+			"dev": true,
+			"requires": {
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-member-expression-to-functions": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz",
+			"integrity": "sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==",
+			"dev": true,
+			"requires": {
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-module-imports": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
+			"integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
+			"dev": true,
+			"requires": {
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-module-transforms": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz",
+			"integrity": "sha512-My4cr9ATcaBbmaEa8M0dZNA74cfI6gitvUAskgDtAFmAqyFKDSHQo5YstxPbN+lzHl2D9l/YOEFqb2mtUh4gfA==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-module-imports": "^7.16.0",
+				"@babel/helper-replace-supers": "^7.16.0",
+				"@babel/helper-simple-access": "^7.16.0",
+				"@babel/helper-split-export-declaration": "^7.16.0",
+				"@babel/helper-validator-identifier": "^7.15.7",
+				"@babel/template": "^7.16.0",
+				"@babel/traverse": "^7.16.0",
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-optimise-call-expression": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz",
+			"integrity": "sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==",
+			"dev": true,
+			"requires": {
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-plugin-utils": {
+			"version": "7.14.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
+			"integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
+			"dev": true
+		},
+		"@babel/helper-replace-supers": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz",
+			"integrity": "sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-member-expression-to-functions": "^7.16.0",
+				"@babel/helper-optimise-call-expression": "^7.16.0",
+				"@babel/traverse": "^7.16.0",
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-simple-access": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.0.tgz",
+			"integrity": "sha512-o1rjBT/gppAqKsYfUdfHq5Rk03lMQrkPHG1OWzHWpLgVXRH4HnMM9Et9CVdIqwkCQlobnGHEJMsgWP/jE1zUiw==",
+			"dev": true,
+			"requires": {
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-split-export-declaration": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz",
+			"integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==",
+			"dev": true,
+			"requires": {
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/helper-validator-identifier": {
+			"version": "7.15.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
+			"integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==",
+			"dev": true
+		},
+		"@babel/helper-validator-option": {
+			"version": "7.14.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
+			"integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==",
+			"dev": true
+		},
+		"@babel/helpers": {
+			"version": "7.16.3",
+			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.3.tgz",
+			"integrity": "sha512-Xn8IhDlBPhvYTvgewPKawhADichOsbkZuzN7qz2BusOM0brChsyXMDJvldWaYMMUNiCQdQzNEioXTp3sC8Nt8w==",
+			"dev": true,
+			"requires": {
+				"@babel/template": "^7.16.0",
+				"@babel/traverse": "^7.16.3",
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/highlight": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz",
+			"integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-validator-identifier": "^7.15.7",
+				"chalk": "^2.0.0",
+				"js-tokens": "^4.0.0"
+			}
+		},
+		"@babel/parser": {
+			"version": "7.16.3",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.3.tgz",
+			"integrity": "sha512-dcNwU1O4sx57ClvLBVFbEgx0UZWfd0JQX5X6fxFRCLHelFBGXFfSz6Y0FAq2PEwUqlqLkdVjVr4VASEOuUnLJw==",
+			"dev": true
+		},
+		"@babel/plugin-syntax-jsx": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.0.tgz",
+			"integrity": "sha512-8zv2+xiPHwly31RK4RmnEYY5zziuF3O7W2kIDW+07ewWDh6Oi0dRq8kwvulRkFgt6DB97RlKs5c1y068iPlCUg==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-plugin-utils": "^7.14.5"
+			}
+		},
+		"@babel/plugin-transform-react-jsx": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.16.0.tgz",
+			"integrity": "sha512-rqDgIbukZ44pqq7NIRPGPGNklshPkvlmvqjdx3OZcGPk4zGIenYkxDTvl3LsSL8gqcc3ZzGmXPE6hR/u/voNOw==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-annotate-as-pure": "^7.16.0",
+				"@babel/helper-module-imports": "^7.16.0",
+				"@babel/helper-plugin-utils": "^7.14.5",
+				"@babel/plugin-syntax-jsx": "^7.16.0",
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/plugin-transform-react-jsx-development": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.0.tgz",
+			"integrity": "sha512-qq65iSqBRq0Hr3wq57YG2AmW0H6wgTnIzpffTphrUWUgLCOK+zf1f7G0vuOiXrp7dU1qq+fQBoqZ3wCDAkhFzw==",
+			"dev": true,
+			"requires": {
+				"@babel/plugin-transform-react-jsx": "^7.16.0"
+			}
+		},
+		"@babel/plugin-transform-react-jsx-self": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.0.tgz",
+			"integrity": "sha512-97yCFY+2GvniqOThOSjPor8xUoDiQ0STVWAQMl3pjhJoFVe5DuXDLZCRSZxu9clx+oRCbTiXGgKEG/Yoyo6Y+w==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-plugin-utils": "^7.14.5"
+			}
+		},
+		"@babel/plugin-transform-react-jsx-source": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.16.0.tgz",
+			"integrity": "sha512-8yvbGGrHOeb/oyPc9tzNoe9/lmIjz3HLa9Nc5dMGDyNpGjfFrk8D2KdEq9NRkftZzeoQEW6yPQ29TMZtrLiUUA==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-plugin-utils": "^7.14.5"
+			}
+		},
+		"@babel/template": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz",
+			"integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==",
+			"dev": true,
+			"requires": {
+				"@babel/code-frame": "^7.16.0",
+				"@babel/parser": "^7.16.0",
+				"@babel/types": "^7.16.0"
+			}
+		},
+		"@babel/traverse": {
+			"version": "7.16.3",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.3.tgz",
+			"integrity": "sha512-eolumr1vVMjqevCpwVO99yN/LoGL0EyHiLO5I043aYQvwOJ9eR5UsZSClHVCzfhBduMAsSzgA/6AyqPjNayJag==",
+			"dev": true,
+			"requires": {
+				"@babel/code-frame": "^7.16.0",
+				"@babel/generator": "^7.16.0",
+				"@babel/helper-function-name": "^7.16.0",
+				"@babel/helper-hoist-variables": "^7.16.0",
+				"@babel/helper-split-export-declaration": "^7.16.0",
+				"@babel/parser": "^7.16.3",
+				"@babel/types": "^7.16.0",
+				"debug": "^4.1.0",
+				"globals": "^11.1.0"
+			}
+		},
+		"@babel/types": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
+			"integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-validator-identifier": "^7.15.7",
+				"to-fast-properties": "^2.0.0"
+			}
+		},
+		"@rollup/pluginutils": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.1.tgz",
+			"integrity": "sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==",
+			"dev": true,
+			"requires": {
+				"estree-walker": "^2.0.1",
+				"picomatch": "^2.2.2"
+			}
+		},
+		"@types/prop-types": {
+			"version": "15.7.4",
+			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+			"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
+			"dev": true
+		},
+		"@types/react": {
+			"version": "17.0.35",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.35.tgz",
+			"integrity": "sha512-r3C8/TJuri/SLZiiwwxQoLAoavaczARfT9up9b4Jr65+ErAUX3MIkU0oMOQnrpfgHme8zIqZLX7O5nnjm5Wayw==",
+			"dev": true,
+			"requires": {
+				"@types/prop-types": "*",
+				"@types/scheduler": "*",
+				"csstype": "^3.0.2"
+			}
+		},
+		"@types/react-dom": {
+			"version": "17.0.11",
+			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
+			"integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
+			"dev": true,
+			"requires": {
+				"@types/react": "*"
+			}
+		},
+		"@types/scheduler": {
+			"version": "0.16.2",
+			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+			"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+			"dev": true
+		},
+		"@vitejs/plugin-react": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-1.0.9.tgz",
+			"integrity": "sha512-1iTS/c3z4QWj8aXIItp6zFMI08UQEz5+fGvnahSCFOSIfazKDlCTEUUQJP23zoxFjeKOF+M3/WA0ZatcHUVEqg==",
+			"dev": true,
+			"requires": {
+				"@babel/core": "^7.15.5",
+				"@babel/plugin-transform-react-jsx": "^7.14.9",
+				"@babel/plugin-transform-react-jsx-development": "^7.14.5",
+				"@babel/plugin-transform-react-jsx-self": "^7.14.9",
+				"@babel/plugin-transform-react-jsx-source": "^7.14.5",
+				"@rollup/pluginutils": "^4.1.1",
+				"react-refresh": "^0.10.0",
+				"resolve": "^1.20.0"
+			}
+		},
+		"ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dev": true,
+			"requires": {
+				"color-convert": "^1.9.0"
+			}
+		},
+		"browserslist": {
+			"version": "4.18.0",
+			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.18.0.tgz",
+			"integrity": "sha512-ER2M0g5iAR84fS/zjBDqEgU6iO5fS9JI2EkHr5zxDxYEFk3LjhU9Vpp/INb6RMQphxko7PDV1FH38H/qVP5yCA==",
+			"dev": true,
+			"requires": {
+				"caniuse-lite": "^1.0.30001280",
+				"electron-to-chromium": "^1.3.896",
+				"escalade": "^3.1.1",
+				"node-releases": "^2.0.1",
+				"picocolors": "^1.0.0"
+			}
+		},
+		"caniuse-lite": {
+			"version": "1.0.30001280",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001280.tgz",
+			"integrity": "sha512-kFXwYvHe5rix25uwueBxC569o53J6TpnGu0BEEn+6Lhl2vsnAumRFWEBhDft1fwyo6m1r4i+RqA4+163FpeFcA==",
+			"dev": true
+		},
+		"chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dev": true,
+			"requires": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			}
+		},
+		"color-convert": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+			"dev": true,
+			"requires": {
+				"color-name": "1.1.3"
+			}
+		},
+		"color-name": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+			"dev": true
+		},
+		"convert-source-map": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
+			"integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
+			"dev": true,
+			"requires": {
+				"safe-buffer": "~5.1.1"
+			}
+		},
+		"csstype": {
+			"version": "3.0.10",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+			"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
+			"dev": true
+		},
+		"debug": {
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+			"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+			"dev": true,
+			"requires": {
+				"ms": "2.1.2"
+			}
+		},
+		"electron-to-chromium": {
+			"version": "1.3.896",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.896.tgz",
+			"integrity": "sha512-NcGkBVXePiuUrPLV8IxP43n1EOtdg+dudVjrfVEUd/bOqpQUFZ2diL5PPYzbgEhZFEltdXV3AcyKwGnEQ5lhMA==",
+			"dev": true
+		},
+		"esbuild": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.13.tgz",
+			"integrity": "sha512-Z17A/R6D0b4s3MousytQ/5i7mTCbaF+Ua/yPfoe71vdTv4KBvVAvQ/6ytMngM2DwGJosl8WxaD75NOQl2QF26Q==",
+			"dev": true,
+			"requires": {
+				"esbuild-android-arm64": "0.13.13",
+				"esbuild-darwin-64": "0.13.13",
+				"esbuild-darwin-arm64": "0.13.13",
+				"esbuild-freebsd-64": "0.13.13",
+				"esbuild-freebsd-arm64": "0.13.13",
+				"esbuild-linux-32": "0.13.13",
+				"esbuild-linux-64": "0.13.13",
+				"esbuild-linux-arm": "0.13.13",
+				"esbuild-linux-arm64": "0.13.13",
+				"esbuild-linux-mips64le": "0.13.13",
+				"esbuild-linux-ppc64le": "0.13.13",
+				"esbuild-netbsd-64": "0.13.13",
+				"esbuild-openbsd-64": "0.13.13",
+				"esbuild-sunos-64": "0.13.13",
+				"esbuild-windows-32": "0.13.13",
+				"esbuild-windows-64": "0.13.13",
+				"esbuild-windows-arm64": "0.13.13"
+			}
+		},
+		"esbuild-android-arm64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.13.tgz",
+			"integrity": "sha512-T02aneWWguJrF082jZworjU6vm8f4UQ+IH2K3HREtlqoY9voiJUwHLRL6khRlsNLzVglqgqb7a3HfGx7hAADCQ==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-darwin-64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.13.tgz",
+			"integrity": "sha512-wkaiGAsN/09X9kDlkxFfbbIgR78SNjMOfUhoel3CqKBDsi9uZhw7HBNHNxTzYUK8X8LAKFpbODgcRB3b/I8gHA==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-darwin-arm64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.13.tgz",
+			"integrity": "sha512-b02/nNKGSV85Gw9pUCI5B48AYjk0vFggDeom0S6QMP/cEDtjSh1WVfoIFNAaLA0MHWfue8KBwoGVsN7rBshs4g==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-freebsd-64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.13.tgz",
+			"integrity": "sha512-ALgXYNYDzk9YPVk80A+G4vz2D22Gv4j4y25exDBGgqTcwrVQP8rf/rjwUjHoh9apP76oLbUZTmUmvCMuTI1V9A==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-freebsd-arm64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.13.tgz",
+			"integrity": "sha512-uFvkCpsZ1yqWQuonw5T1WZ4j59xP/PCvtu6I4pbLejhNo4nwjW6YalqnBvBSORq5/Ifo9S/wsIlVHzkzEwdtlw==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-32": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.13.tgz",
+			"integrity": "sha512-yxR9BBwEPs9acVEwTrEE2JJNHYVuPQC9YGjRfbNqtyfK/vVBQYuw8JaeRFAvFs3pVJdQD0C2BNP4q9d62SCP4w==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.13.tgz",
+			"integrity": "sha512-kzhjlrlJ+6ESRB/n12WTGll94+y+HFeyoWsOrLo/Si0s0f+Vip4b8vlnG0GSiS6JTsWYAtGHReGczFOaETlKIw==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-arm": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.13.tgz",
+			"integrity": "sha512-hXub4pcEds+U1TfvLp1maJ+GHRw7oizvzbGRdUvVDwtITtjq8qpHV5Q5hWNNn6Q+b3b2UxF03JcgnpzCw96nUQ==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-arm64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.13.tgz",
+			"integrity": "sha512-KMrEfnVbmmJxT3vfTnPv/AiXpBFbbyExH13BsUGy1HZRPFMi5Gev5gk8kJIZCQSRfNR17aqq8sO5Crm2KpZkng==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-mips64le": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.13.tgz",
+			"integrity": "sha512-cJT9O1LYljqnnqlHaS0hdG73t7hHzF3zcN0BPsjvBq+5Ad47VJun+/IG4inPhk8ta0aEDK6LdP+F9299xa483w==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-linux-ppc64le": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.13.tgz",
+			"integrity": "sha512-+rghW8st6/7O6QJqAjVK3eXzKkZqYAw6LgHv7yTMiJ6ASnNvghSeOcIvXFep3W2oaJc35SgSPf21Ugh0o777qQ==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-netbsd-64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.13.tgz",
+			"integrity": "sha512-A/B7rwmzPdzF8c3mht5TukbnNwY5qMJqes09ou0RSzA5/jm7Jwl/8z853ofujTFOLhkNHUf002EAgokzSgEMpQ==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-openbsd-64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.13.tgz",
+			"integrity": "sha512-szwtuRA4rXKT3BbwoGpsff6G7nGxdKgUbW9LQo6nm0TVCCjDNDC/LXxT994duIW8Tyq04xZzzZSW7x7ttDiw1w==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-sunos-64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.13.tgz",
+			"integrity": "sha512-ihyds9O48tVOYF48iaHYUK/boU5zRaLOXFS+OOL3ceD39AyHo46HVmsJLc7A2ez0AxNZCxuhu+P9OxfPfycTYQ==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-windows-32": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.13.tgz",
+			"integrity": "sha512-h2RTYwpG4ldGVJlbmORObmilzL8EECy8BFiF8trWE1ZPHLpECE9//J3Bi+W3eDUuv/TqUbiNpGrq4t/odbayUw==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-windows-64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.13.tgz",
+			"integrity": "sha512-oMrgjP4CjONvDHe7IZXHrMk3wX5Lof/IwFEIbwbhgbXGBaN2dke9PkViTiXC3zGJSGpMvATXVplEhlInJ0drHA==",
+			"dev": true,
+			"optional": true
+		},
+		"esbuild-windows-arm64": {
+			"version": "0.13.13",
+			"resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.13.tgz",
+			"integrity": "sha512-6fsDfTuTvltYB5k+QPah/x7LrI2+OLAJLE3bWLDiZI6E8wXMQU+wLqtEO/U/RvJgVY1loPs5eMpUBpVajczh1A==",
+			"dev": true,
+			"optional": true
+		},
+		"escalade": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+			"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+			"dev": true
+		},
+		"escape-string-regexp": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+			"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+			"dev": true
+		},
+		"estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true
+		},
+		"fsevents": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+			"dev": true,
+			"optional": true
+		},
+		"function-bind": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+			"dev": true
+		},
+		"gensync": {
+			"version": "1.0.0-beta.2",
+			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+			"dev": true
+		},
+		"globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"dev": true
+		},
+		"has": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+			"dev": true,
+			"requires": {
+				"function-bind": "^1.1.1"
+			}
+		},
+		"has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+			"dev": true
+		},
+		"is-core-module": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
+			"integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==",
+			"dev": true,
+			"requires": {
+				"has": "^1.0.3"
+			}
+		},
+		"js-tokens": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+			"dev": true
+		},
+		"jsesc": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+			"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+			"dev": true
+		},
+		"json5": {
+			"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,
+			"requires": {
+				"minimist": "^1.2.5"
+			}
+		},
+		"loose-envify": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+			"dev": true,
+			"requires": {
+				"js-tokens": "^3.0.0 || ^4.0.0"
+			}
+		},
+		"minimist": {
+			"version": "1.2.5",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+			"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+			"dev": true
+		},
+		"monaco-editor": {
+			"version": "0.30.1",
+			"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.30.1.tgz",
+			"integrity": "sha512-B/y4+b2O5G2gjuxIFtCE2EkM17R2NM7/3F8x0qcPsqy4V83bitJTIO4TIeZpYlzu/xy6INiY/+84BEm6+7Cmzg==",
+			"dev": true
+		},
+		"ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+			"dev": true
+		},
+		"nanoid": {
+			"version": "3.1.30",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
+			"integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
+			"dev": true
+		},
+		"node-releases": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
+			"integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
+			"dev": true
+		},
+		"object-assign": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+			"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+			"dev": true
+		},
+		"path-parse": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+			"dev": true
+		},
+		"picocolors": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+			"dev": true
+		},
+		"picomatch": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+			"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+			"dev": true
+		},
+		"postcss": {
+			"version": "8.3.11",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz",
+			"integrity": "sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==",
+			"dev": true,
+			"requires": {
+				"nanoid": "^3.1.30",
+				"picocolors": "^1.0.0",
+				"source-map-js": "^0.6.2"
+			}
+		},
+		"react": {
+			"version": "17.0.2",
+			"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+			"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+			"dev": true,
+			"requires": {
+				"loose-envify": "^1.1.0",
+				"object-assign": "^4.1.1"
+			}
+		},
+		"react-dom": {
+			"version": "17.0.2",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+			"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+			"dev": true,
+			"requires": {
+				"loose-envify": "^1.1.0",
+				"object-assign": "^4.1.1",
+				"scheduler": "^0.20.2"
+			}
+		},
+		"react-refresh": {
+			"version": "0.10.0",
+			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.10.0.tgz",
+			"integrity": "sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==",
+			"dev": true
+		},
+		"resolve": {
+			"version": "1.20.0",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+			"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+			"dev": true,
+			"requires": {
+				"is-core-module": "^2.2.0",
+				"path-parse": "^1.0.6"
+			}
+		},
+		"rollup": {
+			"version": "2.60.0",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.60.0.tgz",
+			"integrity": "sha512-cHdv9GWd58v58rdseC8e8XIaPUo8a9cgZpnCMMDGZFDZKEODOiPPEQFXLriWr/TjXzhPPmG5bkAztPsOARIcGQ==",
+			"dev": true,
+			"requires": {
+				"fsevents": "~2.3.2"
+			}
+		},
+		"safe-buffer": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+			"dev": true
+		},
+		"scheduler": {
+			"version": "0.20.2",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+			"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+			"dev": true,
+			"requires": {
+				"loose-envify": "^1.1.0",
+				"object-assign": "^4.1.1"
+			}
+		},
+		"semver": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+			"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+			"dev": true
+		},
+		"source-map": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+			"dev": true
+		},
+		"source-map-js": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+			"integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+			"dev": true
+		},
+		"supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dev": true,
+			"requires": {
+				"has-flag": "^3.0.0"
+			}
+		},
+		"to-fast-properties": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+			"dev": true
+		},
+		"typescript": {
+			"version": "4.4.4",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
+			"integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
+			"dev": true
+		},
+		"vite": {
+			"version": "2.6.14",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-2.6.14.tgz",
+			"integrity": "sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA==",
+			"dev": true,
+			"requires": {
+				"esbuild": "^0.13.2",
+				"fsevents": "~2.3.2",
+				"postcss": "^8.3.8",
+				"resolve": "^1.20.0",
+				"rollup": "^2.57.0"
+			}
+		}
+	}
+}
--- a/samples/browser-esm-vite-react/package.json
+++ b/samples/browser-esm-vite-react/package.json
@ -0,0 +1,19 @@
+{
+	"name": "browser-esm-vite-react",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build",
+		"serve": "vite preview"
+	},
+	"dependencies": {},
+	"devDependencies": {
+		"monaco-editor": "^0.30.1",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"@types/react": "^17.0.35",
+		"@types/react-dom": "^17.0.11",
+		"@vitejs/plugin-react": "^1.0.9",
+		"typescript": "^4.4.4",
+		"vite": "^2.6.14"
+	}
+}
--- a/samples/browser-esm-vite-react/src/components/Editor.module.css
+++ b/samples/browser-esm-vite-react/src/components/Editor.module.css
@ -0,0 +1,4 @@
+.Editor {
+	width: 100vw;
+	height: 100vh;
+}
--- a/samples/browser-esm-vite-react/src/components/Editor.tsx
+++ b/samples/browser-esm-vite-react/src/components/Editor.tsx
@ -0,0 +1,23 @@
+import { VFC, useRef, useState, useEffect } from 'react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import styles from './Editor.module.css';
+
+export const Editor: VFC = () => {
+	const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+	const monacoEl = useRef(null);
+
+	useEffect(() => {
+		if (monacoEl && !editor) {
+			setEditor(
+				monaco.editor.create(monacoEl.current!, {
+					value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+					language: 'typescript'
+				})
+			);
+		}
+
+		return () => editor?.dispose();
+	}, [monacoEl.current]);
+
+	return <div className={styles.Editor} ref={monacoEl}></div>;
+};
--- a/samples/browser-esm-vite-react/src/main.tsx
+++ b/samples/browser-esm-vite-react/src/main.tsx
@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Editor } from './components/Editor';
+import './userWorker';
+
+ReactDOM.render(
+	<React.StrictMode>
+		<Editor />
+	</React.StrictMode>,
+	document.getElementById('root')
+);
--- a/samples/browser-esm-vite-react/src/userWorker.ts
+++ b/samples/browser-esm-vite-react/src/userWorker.ts
@ -0,0 +1,27 @@
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+// @ts-ignore
+self.MonacoEnvironment = {
+	getWorker(_: any, label: string) {
+		if (label === 'json') {
+			return new jsonWorker();
+		}
+		if (label === 'css' || label === 'scss' || label === 'less') {
+			return new cssWorker();
+		}
+		if (label === 'html' || label === 'handlebars' || label === 'razor') {
+			return new htmlWorker();
+		}
+		if (label === 'typescript' || label === 'javascript') {
+			return new tsWorker();
+		}
+		return new editorWorker();
+	}
+};
+
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
--- a/samples/browser-esm-vite-react/src/vite-env.d.ts
+++ b/samples/browser-esm-vite-react/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/samples/browser-esm-vite-react/tsconfig.json
+++ b/samples/browser-esm-vite-react/tsconfig.json
@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"strict": true,
+		"module": "ESNext",
+		"jsx": "react-jsx",
+		"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true
+	},
+	"include": ["./src"]
+}
--- a/samples/browser-esm-vite-react/vite.config.ts
+++ b/samples/browser-esm-vite-react/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [react()]
+});
--- a/samples/browser-esm-webpack-monaco-plugin/.gitignore
+++ b/samples/browser-esm-webpack-monaco-plugin/.gitignore
@ -0,0 +1,2 @@
+dist/*.js
+dist/*.ttf
--- a/samples/browser-esm-webpack-monaco-plugin/dist/index.html
+++ b/samples/browser-esm-webpack-monaco-plugin/dist/index.html
@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<script src="./main.bundle.js"></script>
+	</body>
+</html>
--- a/samples/browser-esm-webpack-monaco-plugin/index.html
+++ b/samples/browser-esm-webpack-monaco-plugin/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Webpack Plugin Sample</h2>
+
+		To run this sample, you need to:
+
+		<pre>
+$/> npm install .
+$/> npm run simpleserver
+$/browser-esm-webpack-monaco-plugin> npm run build
+</pre
+		>
+
+		Then, <a href="./dist">open the ./dist folder</a>.
+	</body>
+</html>
--- a/samples/browser-esm-webpack-monaco-plugin/index.js
+++ b/samples/browser-esm-webpack-monaco-plugin/index.js
@ -0,0 +1,16 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+(function () {
+	// create div to avoid needing a HtmlWebpackPlugin template
+	const div = document.createElement('div');
+	div.id = 'root';
+	div.style = 'width:800px; height:600px; border:1px solid #ccc;';
+
+	document.body.appendChild(div);
+})();
+
+monaco.editor.create(document.getElementById('root'), {
+	value: `const foo = () => 0;`,
+	language: 'javascript',
+	theme: 'vs-dark'
+});
--- a/samples/browser-esm-webpack-monaco-plugin/package.json
+++ b/samples/browser-esm-webpack-monaco-plugin/package.json
@ -0,0 +1,6 @@
+{
+	"name": "browser-esm-webpack-monaco-plugin",
+	"scripts": {
+		"build": "node ../node_modules/webpack/bin/webpack.js --progress"
+	}
+}
--- a/samples/browser-esm-webpack-monaco-plugin/webpack.config.js
+++ b/samples/browser-esm-webpack-monaco-plugin/webpack.config.js
@ -0,0 +1,28 @@
+const path = require('path');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+module.exports = {
+	mode: process.env.NODE_ENV,
+	entry: './index.js',
+	output: {
+		path: path.resolve(__dirname, 'dist'),
+		filename: '[name].bundle.js'
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			},
+			{
+				test: /\.ttf$/,
+				use: ['file-loader']
+			}
+		]
+	},
+	plugins: [
+		new MonacoWebpackPlugin({
+			languages: ['typescript', 'javascript', 'css']
+		})
+	]
+};
--- a/samples/browser-esm-webpack-small/.gitignore
+++ b/samples/browser-esm-webpack-small/.gitignore
@ -0,0 +1,3 @@
+dist/*.js
+dist/*.ttf
+dist/*.txt
--- a/samples/browser-esm-webpack-small/dist/index.html
+++ b/samples/browser-esm-webpack-small/dist/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
+
+		<script src="./app.bundle.js"></script>
+	</body>
+</html>
--- a/samples/browser-esm-webpack-small/generate-imports.js
+++ b/samples/browser-esm-webpack-small/generate-imports.js
@ -0,0 +1,140 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const glob = require('glob');
+const path = require('path');
+const fs = require('fs');
+
+const FILE_PATH = path.join(__dirname, 'index.js');
+generateLanguages();
+generateFeatures();
+
+/**
+ * @returns { Promise<string[]> }
+ */
+function getBasicLanguages() {
+	return new Promise((resolve, reject) => {
+		glob(
+			'./node_modules/monaco-editor/esm/vs/basic-languages/*/*.contribution.js',
+			{ cwd: path.dirname(__dirname) },
+			(err, files) => {
+				if (err) {
+					reject(err);
+					return;
+				}
+
+				resolve(
+					files.map((file) => {
+						return file.substring('./node_modules/monaco-editor/esm/'.length).replace(/\.js$/, '');
+					})
+				);
+			}
+		);
+	});
+}
+
+/**
+ * @returns { Promise<string[]> }
+ */
+function getAdvancedLanguages() {
+	return new Promise((resolve, reject) => {
+		glob(
+			'./node_modules/monaco-editor/esm/vs/language/*/monaco.contribution.js',
+			{ cwd: path.dirname(__dirname) },
+			(err, files) => {
+				if (err) {
+					reject(err);
+					return;
+				}
+
+				resolve(
+					files
+						.map((file) => file.substring('./node_modules/monaco-editor/esm/vs/language/'.length))
+						.map((file) => file.substring(0, file.length - '/monaco.contribution.js'.length))
+						.map((lang) => `vs/language/${lang}/monaco.contribution`)
+				);
+			}
+		);
+	});
+}
+
+function generateLanguages() {
+	return Promise.all([getBasicLanguages(), getAdvancedLanguages()]).then(
+		([basicLanguages, advancedLanguages]) => {
+			basicLanguages.sort(strcmp);
+			advancedLanguages.sort(strcmp);
+
+			const allLanguages = advancedLanguages.concat(basicLanguages);
+			const imports = allLanguages
+				.map((l) => `import 'monaco-editor/esm/${l}.js';`)
+				.map((l) => `${/python/.test(l) ? '' : '// '}${l}`)
+				.join('\n');
+
+			let contents = fs.readFileSync(FILE_PATH).toString();
+			contents = contents.replace(
+				/\/\/ BEGIN_LANGUAGES\n([\/ a-zA-Z0-9'\/\-\.;]+\n)+\/\/ END_LANGUAGES/,
+				`// BEGIN_LANGUAGES\n${imports}\n// END_LANGUAGES`
+			);
+			fs.writeFileSync(FILE_PATH, contents);
+		}
+	);
+}
+
+function strcmp(a, b) {
+	if (a < b) {
+		return -1;
+	}
+	if (a > b) {
+		return 1;
+	}
+	return 0;
+}
+
+/**
+ * @returns { string[] }
+ */
+function generateFeatures() {
+	const skipImports = [
+		'vs/editor/common/standaloneStrings',
+		'vs/editor/contrib/tokenization/tokenization',
+		'vs/editor/editor.all',
+		'vs/base/browser/ui/codicons/codiconStyles'
+	];
+
+	let features = [];
+	const files =
+		fs
+			.readFileSync(
+				path.join(__dirname, '../node_modules/monaco-editor/esm/vs/editor/edcore.main.js')
+			)
+			.toString() +
+		fs
+			.readFileSync(
+				path.join(__dirname, '../node_modules/monaco-editor/esm/vs/editor/editor.all.js')
+			)
+			.toString();
+	files.split(/\r\n|\n/).forEach((line) => {
+		const m = line.match(/import '([^']+)'/);
+		if (m) {
+			const tmp = path.posix.join('vs/editor', m[1]).replace(/\.js$/, '');
+			if (skipImports.indexOf(tmp) === -1) {
+				features.push(tmp);
+			}
+		}
+	});
+
+	features.sort(strcmp);
+	const imports = features
+		.map((l) => `import 'monaco-editor/esm/${l}.js';`)
+		.map((l) => `${/(coreCommands)|(findController)/.test(l) ? '' : '// '}${l}`)
+		.join('\n');
+
+	let contents = fs.readFileSync(FILE_PATH).toString();
+	contents = contents.replace(
+		/\/\/ BEGIN_FEATURES\n([\/ a-zA-Z0-9'\/\-\.;]+\n)+\/\/ END_FEATURES/,
+		`// BEGIN_FEATURES\n${imports}\n// END_FEATURES`
+	);
+	fs.writeFileSync(FILE_PATH, contents);
+}
--- a/samples/browser-esm-webpack-small/index.html
+++ b/samples/browser-esm-webpack-small/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Webpack Sample</h2>
+
+		This sample shows how to load a small subset of the editor:
+		<ul>
+			<li>Only the core editor and the find widget</li>
+			<li>Only the python language coloring</li>
+		</ul>
+
+		To run this sample, you need to:
+
+		<pre>
+$/> npm install .
+$/> npm run simpleserver
+$/browser-esm-webpack-small> npm run build
+</pre
+		>
+
+		Then, <a href="./dist">open the ./dist folder</a>.
+	</body>
+</html>
--- a/samples/browser-esm-webpack-small/index.js
+++ b/samples/browser-esm-webpack-small/index.js
@ -0,0 +1,168 @@
+// (1) Desired editor features:
+// BEGIN_FEATURES
+import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
+// import 'monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js';
+// import 'monaco-editor/esm/vs/editor/browser/widget/diffEditorWidget.js';
+// import 'monaco-editor/esm/vs/editor/browser/widget/diffNavigator.js';
+// import 'monaco-editor/esm/vs/editor/contrib/anchorSelect/anchorSelect.js';
+// import 'monaco-editor/esm/vs/editor/contrib/bracketMatching/bracketMatching.js';
+// import 'monaco-editor/esm/vs/editor/contrib/caretOperations/caretOperations.js';
+// import 'monaco-editor/esm/vs/editor/contrib/caretOperations/transpose.js';
+// import 'monaco-editor/esm/vs/editor/contrib/clipboard/clipboard.js';
+// import 'monaco-editor/esm/vs/editor/contrib/codeAction/codeActionContributions.js';
+// import 'monaco-editor/esm/vs/editor/contrib/codelens/codelensController.js';
+// import 'monaco-editor/esm/vs/editor/contrib/colorPicker/colorContributions.js';
+// import 'monaco-editor/esm/vs/editor/contrib/comment/comment.js';
+// import 'monaco-editor/esm/vs/editor/contrib/contextmenu/contextmenu.js';
+// import 'monaco-editor/esm/vs/editor/contrib/cursorUndo/cursorUndo.js';
+// import 'monaco-editor/esm/vs/editor/contrib/dnd/dnd.js';
+// import 'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymbols.js';
+import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
+// import 'monaco-editor/esm/vs/editor/contrib/folding/folding.js';
+// import 'monaco-editor/esm/vs/editor/contrib/fontZoom/fontZoom.js';
+// import 'monaco-editor/esm/vs/editor/contrib/format/formatActions.js';
+// import 'monaco-editor/esm/vs/editor/contrib/gotoError/gotoError.js';
+// import 'monaco-editor/esm/vs/editor/contrib/gotoSymbol/goToCommands.js';
+// import 'monaco-editor/esm/vs/editor/contrib/gotoSymbol/link/goToDefinitionAtPosition.js';
+// import 'monaco-editor/esm/vs/editor/contrib/hover/hover.js';
+// import 'monaco-editor/esm/vs/editor/contrib/inPlaceReplace/inPlaceReplace.js';
+// import 'monaco-editor/esm/vs/editor/contrib/indentation/indentation.js';
+// import 'monaco-editor/esm/vs/editor/contrib/inlineHints/inlineHintsController.js';
+// import 'monaco-editor/esm/vs/editor/contrib/linesOperations/linesOperations.js';
+// import 'monaco-editor/esm/vs/editor/contrib/linkedEditing/linkedEditing.js';
+// import 'monaco-editor/esm/vs/editor/contrib/links/links.js';
+// import 'monaco-editor/esm/vs/editor/contrib/multicursor/multicursor.js';
+// import 'monaco-editor/esm/vs/editor/contrib/parameterHints/parameterHints.js';
+// import 'monaco-editor/esm/vs/editor/contrib/rename/rename.js';
+// import 'monaco-editor/esm/vs/editor/contrib/smartSelect/smartSelect.js';
+// import 'monaco-editor/esm/vs/editor/contrib/snippet/snippetController2.js';
+// import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js';
+// import 'monaco-editor/esm/vs/editor/contrib/toggleTabFocusMode/toggleTabFocusMode.js';
+// import 'monaco-editor/esm/vs/editor/contrib/unusualLineTerminators/unusualLineTerminators.js';
+// import 'monaco-editor/esm/vs/editor/contrib/viewportSemanticTokens/viewportSemanticTokens.js';
+// import 'monaco-editor/esm/vs/editor/contrib/wordHighlighter/wordHighlighter.js';
+// import 'monaco-editor/esm/vs/editor/contrib/wordOperations/wordOperations.js';
+// import 'monaco-editor/esm/vs/editor/contrib/wordPartOperations/wordPartOperations.js';
+// import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
+// import 'monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js';
+// import 'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js';
+// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js';
+// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js';
+// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js';
+// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js';
+// import 'monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js';
+// import 'monaco-editor/esm/vs/editor/standalone/browser/toggleHighContrast/toggleHighContrast.js';
+// END_FEATURES
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+
+// (2) Desired languages:
+// BEGIN_LANGUAGES
+// import 'monaco-editor/esm/vs/language/css/monaco.contribution.js';
+// import 'monaco-editor/esm/vs/language/html/monaco.contribution.js';
+// import 'monaco-editor/esm/vs/language/json/monaco.contribution.js';
+// import 'monaco-editor/esm/vs/language/typescript/monaco.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/abap/abap.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/apex/apex.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/azcli/azcli.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/bat/bat.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/cameligo/cameligo.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/clojure/clojure.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/coffee/coffee.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/cpp/cpp.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/csharp/csharp.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/csp/csp.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/css/css.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/dart/dart.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/ecl/ecl.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/fsharp/fsharp.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/go/go.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/handlebars/handlebars.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/hcl/hcl.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/html/html.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/ini/ini.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/java/java.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/julia/julia.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/kotlin/kotlin.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/less/less.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/lexon/lexon.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/lua/lua.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/m3/m3.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/mips/mips.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/msdax/msdax.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/mysql/mysql.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/objective-c/objective-c.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/pascal/pascal.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/pascaligo/pascaligo.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/perl/perl.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/pgsql/pgsql.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/php/php.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/postiats/postiats.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/powerquery/powerquery.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/powershell/powershell.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/pug/pug.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/python/python.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/r/r.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/razor/razor.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/redis/redis.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/redshift/redshift.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/restructuredtext/restructuredtext.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/ruby/ruby.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/rust/rust.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/sb/sb.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/scala/scala.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/scheme/scheme.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/scss/scss.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/solidity/solidity.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/sophia/sophia.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/st/st.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/swift/swift.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/systemverilog/systemverilog.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/tcl/tcl.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/twig/twig.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/vb/vb.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution.js';
+// import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js';
+// END_LANGUAGES
+
+self.MonacoEnvironment = {
+	getWorkerUrl: function (moduleId, label) {
+		// if (label === 'json') {
+		// 	return './json.worker.bundle.js';
+		// }
+		// if (label === 'css' || label === 'scss' || label === 'less') {
+		// 	return './css.worker.bundle.js';
+		// }
+		// if (label === 'html' || label === 'handlebars' || label === 'razor') {
+		// 	return './html.worker.bundle.js';
+		// }
+		// if (label === 'typescript' || label === 'javascript') {
+		// 	return './ts.worker.bundle.js';
+		// }
+		return './editor.worker.bundle.js';
+	}
+};
+
+monaco.editor.create(document.getElementById('container'), {
+	value: [
+		'from banana import *',
+		'',
+		'class Monkey:',
+		'	# Bananas the monkey can eat.',
+		'	capacity = 10',
+		'	def eat(self, N):',
+		"		'''Make the monkey eat N bananas!'''",
+		'		capacity = capacity - N*banana.size',
+		'',
+		'	def feeding_frenzy(self):',
+		'		eat(9.25)',
+		'		return "Yum yum"'
+	].join('\n'),
+	language: 'python'
+});
--- a/samples/browser-esm-webpack-small/package.json
+++ b/samples/browser-esm-webpack-small/package.json
@ -0,0 +1,7 @@
+{
+	"name": "browser-esm-webpack-small",
+	"scripts": {
+		"build": "node ../node_modules/webpack/bin/webpack.js --progress",
+		"generate-imports": "node generate-imports.js"
+	}
+}
--- a/samples/browser-esm-webpack-small/webpack.config.js
+++ b/samples/browser-esm-webpack-small/webpack.config.js
@ -0,0 +1,35 @@
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+	mode: 'production',
+	entry: {
+		app: './index.js',
+		'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js'
+		// "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
+		// "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
+		// "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
+		// "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
+	},
+	output: {
+		globalObject: 'self',
+		filename: '[name].bundle.js',
+		path: path.resolve(__dirname, 'dist')
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			},
+			{
+				test: /\.ttf$/,
+				use: ['file-loader']
+			}
+		]
+	},
+	optimization: {
+		minimize: true,
+		minimizer: [new TerserPlugin()]
+	}
+};
--- a/samples/browser-esm-webpack-typescript-react/.gitignore
+++ b/samples/browser-esm-webpack-typescript-react/.gitignore
@ -0,0 +1,5 @@
+dist
+lib
+logs
+*.log
+npm-debug.log*
--- a/samples/browser-esm-webpack-typescript-react/package-lock.json
+++ b/samples/browser-esm-webpack-typescript-react/package-lock.json
--- a/samples/browser-esm-webpack-typescript-react/package.json
+++ b/samples/browser-esm-webpack-typescript-react/package.json
@ -0,0 +1,21 @@
+{
+	"name": "monaco-esm-webpack-typescript",
+	"scripts": {
+		"start": "node ../node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+		"build": "NODE_ENV='production' node ../node_modules/webpack/bin/webpack.js --progress"
+	},
+	"dependencies": {},
+	"devDependencies": {
+		"@babel/core": "^7.16.0",
+		"@babel/preset-env": "^7.16.0",
+		"@babel/preset-react": "^7.16.0",
+		"@babel/preset-typescript": "^7.16.0",
+		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
+		"@types/react": "^17.0.35",
+		"@types/react-dom": "^17.0.11",
+		"babel-loader": "^8.2.3",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"react-refresh": "^0.11.0"
+	}
+}
--- a/samples/browser-esm-webpack-typescript-react/src/components/Editor.tsx
+++ b/samples/browser-esm-webpack-typescript-react/src/components/Editor.tsx
@ -0,0 +1,38 @@
+import React, { useRef, useEffect } from 'react';
+import * as monaco from 'monaco-editor';
+
+// @ts-ignore
+self.MonacoEnvironment = {
+	getWorkerUrl: function (_moduleId: any, label: string) {
+		if (label === 'json') {
+			return './json.worker.bundle.js';
+		}
+		if (label === 'css' || label === 'scss' || label === 'less') {
+			return './css.worker.bundle.js';
+		}
+		if (label === 'html' || label === 'handlebars' || label === 'razor') {
+			return './html.worker.bundle.js';
+		}
+		if (label === 'typescript' || label === 'javascript') {
+			return './ts.worker.bundle.js';
+		}
+		return './editor.worker.bundle.js';
+	}
+};
+
+export const Editor: React.FC = () => {
+	const divEl = useRef<HTMLDivElement>(null);
+	let editor: monaco.editor.IStandaloneCodeEditor;
+	useEffect(() => {
+		if (divEl.current) {
+			editor = monaco.editor.create(divEl.current, {
+				value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+				language: 'typescript'
+			});
+		}
+		return () => {
+			editor.dispose();
+		};
+	}, []);
+	return <div className="Editor" ref={divEl}></div>;
+};
--- a/samples/browser-esm-webpack-typescript-react/src/index.css
+++ b/samples/browser-esm-webpack-typescript-react/src/index.css
@ -0,0 +1,5 @@
+.Editor {
+	width: 800px;
+	height: 600px;
+	border: 1px solid #ccc;
+}
--- a/samples/browser-esm-webpack-typescript-react/src/index.html
+++ b/samples/browser-esm-webpack-typescript-react/src/index.html
@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Monaco Editor Sample</title>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>
--- a/samples/browser-esm-webpack-typescript-react/src/index.tsx
+++ b/samples/browser-esm-webpack-typescript-react/src/index.tsx
@ -0,0 +1,12 @@
+import './index.css';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Editor } from './components/Editor';
+
+ReactDOM.render(
+	<React.StrictMode>
+		<Editor />
+	</React.StrictMode>,
+	document.getElementById('root')
+);
--- a/samples/browser-esm-webpack-typescript-react/tsconfig.json
+++ b/samples/browser-esm-webpack-typescript-react/tsconfig.json
@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"sourceMap": true,
+		"module": "commonjs",
+		"moduleResolution": "node",
+		"strict": true,
+		"target": "ES6",
+		"outDir": "./dist",
+		"lib": ["dom", "es5", "es2015.collection", "es2015.promise"],
+		"types": [],
+		"baseUrl": "./node_modules",
+		"jsx": "preserve",
+		"esModuleInterop": true,
+		"typeRoots": ["node_modules/@types"]
+	},
+	"include": ["./src/**/*"],
+	"exclude": ["node_modules"]
+}
--- a/samples/browser-esm-webpack-typescript-react/webpack.config.js
+++ b/samples/browser-esm-webpack-typescript-react/webpack.config.js
@ -0,0 +1,59 @@
+const path = require('path');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+	mode: 'development',
+	entry: {
+		app: './src/index.tsx',
+		'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
+		'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
+		'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
+		'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
+		'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
+	},
+	devServer: {
+		hot: true
+	},
+	resolve: {
+		extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
+	},
+	output: {
+		globalObject: 'self',
+		filename: '[name].bundle.js',
+		path: path.resolve(__dirname, 'dist')
+	},
+	module: {
+		rules: [
+			{
+				test: /\.(js|jsx|tsx|ts)$/,
+				exclude: /node_modules/,
+				use: [
+					{
+						loader: require.resolve('babel-loader'),
+						options: {
+							presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+							plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean)
+						}
+					}
+				]
+			},
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			},
+			{
+				test: /\.ttf$/,
+				use: ['file-loader']
+			}
+		]
+	},
+	plugins: [
+		new HtmlWebPackPlugin({
+			template: 'src/index.html'
+		}),
+		isDevelopment && new ReactRefreshWebpackPlugin()
+	].filter(Boolean)
+};
--- a/samples/browser-esm-webpack-typescript/.gitignore
+++ b/samples/browser-esm-webpack-typescript/.gitignore
@ -0,0 +1,5 @@
+dist
+lib
+logs
+*.log
+npm-debug.log*
--- a/samples/browser-esm-webpack-typescript/package.json
+++ b/samples/browser-esm-webpack-typescript/package.json
@ -0,0 +1,7 @@
+{
+	"name": "monaco-esm-webpack-typescript",
+	"scripts": {
+		"start": "node ../node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+		"build": "node ../node_modules/webpack/bin/webpack.js --progress"
+	}
+}
--- a/samples/browser-esm-webpack-typescript/src/index.css
+++ b/samples/browser-esm-webpack-typescript/src/index.css
@ -0,0 +1,5 @@
+body {
+	width: 800px;
+	height: 600px;
+	border: 1px solid #ccc;
+}
--- a/samples/browser-esm-webpack-typescript/src/index.ts
+++ b/samples/browser-esm-webpack-typescript/src/index.ts
@ -0,0 +1,26 @@
+import * as monaco from 'monaco-editor';
+import './index.css';
+
+// @ts-ignore
+self.MonacoEnvironment = {
+	getWorkerUrl: function (moduleId, label) {
+		if (label === 'json') {
+			return './json.worker.bundle.js';
+		}
+		if (label === 'css' || label === 'scss' || label === 'less') {
+			return './css.worker.bundle.js';
+		}
+		if (label === 'html' || label === 'handlebars' || label === 'razor') {
+			return './html.worker.bundle.js';
+		}
+		if (label === 'typescript' || label === 'javascript') {
+			return './ts.worker.bundle.js';
+		}
+		return './editor.worker.bundle.js';
+	}
+};
+
+monaco.editor.create(document.body, {
+	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+	language: 'typescript'
+});
--- a/samples/browser-esm-webpack-typescript/tsconfig.json
+++ b/samples/browser-esm-webpack-typescript/tsconfig.json
@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"sourceMap": true,
+		"module": "commonjs",
+		"moduleResolution": "node",
+		"target": "es5",
+		"outDir": "./dist",
+		"lib": ["dom", "es5", "es2015.collection", "es2015.promise"],
+		"types": [],
+		"baseUrl": "./node_modules",
+		"jsx": "preserve",
+		"typeRoots": ["node_modules/@types"]
+	},
+	"include": ["./src/**/*"],
+	"exclude": ["node_modules"]
+}
--- a/samples/browser-esm-webpack-typescript/webpack.config.js
+++ b/samples/browser-esm-webpack-typescript/webpack.config.js
@ -0,0 +1,44 @@
+const path = require('path');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+	mode: 'development',
+	entry: {
+		app: './src/index.ts',
+		'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
+		'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
+		'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
+		'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
+		'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
+	},
+	resolve: {
+		extensions: ['.ts', '.js']
+	},
+	output: {
+		globalObject: 'self',
+		filename: '[name].bundle.js',
+		path: path.resolve(__dirname, 'dist')
+	},
+	module: {
+		rules: [
+			{
+				test: /\.ts?$/,
+				use: 'ts-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			},
+			{
+				test: /\.ttf$/,
+				use: ['file-loader']
+			}
+		]
+	},
+	plugins: [
+		new HtmlWebPackPlugin({
+			title: 'Monaco Editor Sample'
+		})
+	]
+};
--- a/samples/browser-esm-webpack/.gitignore
+++ b/samples/browser-esm-webpack/.gitignore
@ -0,0 +1,2 @@
+dist/*.js
+dist/*.ttf
--- a/samples/browser-esm-webpack/dist/index.html
+++ b/samples/browser-esm-webpack/dist/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
+
+		<script src="./app.bundle.js"></script>
+	</body>
+</html>
--- a/samples/browser-esm-webpack/index.html
+++ b/samples/browser-esm-webpack/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Webpack Sample</h2>
+
+		To run this sample, you need to:
+
+		<pre>
+$/> npm install .
+$/> npm run simpleserver
+$/browser-esm-webpack> npm run build
+</pre
+		>
+
+		Then, <a href="./dist">open the ./dist folder</a>.
+	</body>
+</html>
--- a/samples/browser-esm-webpack/index.js
+++ b/samples/browser-esm-webpack/index.js
@ -0,0 +1,24 @@
+import * as monaco from 'monaco-editor';
+
+self.MonacoEnvironment = {
+	getWorkerUrl: function (moduleId, label) {
+		if (label === 'json') {
+			return './json.worker.bundle.js';
+		}
+		if (label === 'css' || label === 'scss' || label === 'less') {
+			return './css.worker.bundle.js';
+		}
+		if (label === 'html' || label === 'handlebars' || label === 'razor') {
+			return './html.worker.bundle.js';
+		}
+		if (label === 'typescript' || label === 'javascript') {
+			return './ts.worker.bundle.js';
+		}
+		return './editor.worker.bundle.js';
+	}
+};
+
+monaco.editor.create(document.getElementById('container'), {
+	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+	language: 'javascript'
+});
--- a/samples/browser-esm-webpack/package.json
+++ b/samples/browser-esm-webpack/package.json
@ -0,0 +1,6 @@
+{
+	"name": "browser-esm-webpack",
+	"scripts": {
+		"build": "node ../node_modules/webpack/bin/webpack.js --progress"
+	}
+}
--- a/samples/browser-esm-webpack/webpack.config.js
+++ b/samples/browser-esm-webpack/webpack.config.js
@ -0,0 +1,30 @@
+const path = require('path');
+
+module.exports = {
+	mode: 'development',
+	entry: {
+		app: './index.js',
+		'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
+		'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
+		'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
+		'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
+		'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
+	},
+	output: {
+		globalObject: 'self',
+		filename: '[name].bundle.js',
+		path: path.resolve(__dirname, 'dist')
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			},
+			{
+				test: /\.ttf$/,
+				use: ['file-loader']
+			}
+		]
+	}
+};
--- a/samples/browser-script-editor/index.html
+++ b/samples/browser-script-editor/index.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+		<link
+			rel="stylesheet"
+			data-name="vs/editor/editor.main"
+			href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"
+		/>
+	</head>
+	<body>
+		<h2>Monaco Editor Sync Loading Sample</h2>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
+
+		<script>
+			var require = { paths: { vs: '../node_modules/monaco-editor/min/vs' } };
+		</script>
+		<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+		<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
+		<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
+
+		<script>
+			var editor = monaco.editor.create(document.getElementById('container'), {
+				value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+				language: 'javascript'
+			});
+		</script>
+	</body>
+</html>
--- a/samples/electron-amd-nodeIntegration/electron-index.html
+++ b/samples/electron-amd-nodeIntegration/electron-index.html
@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			http-equiv="Content-Security-Policy"
+			content="default-src 'none'; script-src file: 'sha256-RtE3AqQ1tBhtcwykhJsEKY7jjCqiGy5yH1mRDwu6gEE='; style-src 'unsafe-inline' file:; font-src file:"
+		/>
+		<title>Monaco Editor!</title>
+	</head>
+	<body>
+		<h1>Monaco Editor in Electron!</h1>
+		<div id="container" style="width: 500px; height: 300px; border: 1px solid #ccc"></div>
+	</body>
+
+	<script>
+		(function () {
+			const path = require('path');
+			const amdLoader = require('../node_modules/monaco-editor/min/vs/loader.js');
+			const amdRequire = amdLoader.require;
+			const amdDefine = amdLoader.require.define;
+
+			function uriFromPath(_path) {
+				var pathName = path.resolve(_path).replace(/\\/g, '/');
+				if (pathName.length > 0 && pathName.charAt(0) !== '/') {
+					pathName = '/' + pathName;
+				}
+				return encodeURI('file://' + pathName);
+			}
+
+			amdRequire.config({
+				baseUrl: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min'))
+			});
+
+			// workaround monaco-css not understanding the environment
+			self.module = undefined;
+
+			amdRequire(['vs/editor/editor.main'], function () {
+				var editor = monaco.editor.create(document.getElementById('container'), {
+					value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+					language: 'javascript'
+				});
+			});
+		})();
+	</script>
+</html>
--- a/samples/electron-amd-nodeIntegration/index.html
+++ b/samples/electron-amd-nodeIntegration/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Electron Sample</h2>
+
+		To run this sample, you need to
+		<a href="https://github.com/electron/electron/releases">download Electron</a>
+		and then execute:
+
+		<pre>
+$/electron-amd> electron main.js
+</pre
+		>
+	</body>
+</html>
--- a/samples/electron-amd-nodeIntegration/main.js
+++ b/samples/electron-amd-nodeIntegration/main.js
@ -0,0 +1,35 @@
+const electron = require('electron');
+const app = electron.app;
+const BrowserWindow = electron.BrowserWindow;
+
+let mainWindow;
+
+function createWindow() {
+	mainWindow = new BrowserWindow({
+		width: 800,
+		height: 600,
+		webPreferences: {
+			nodeIntegration: true,
+			worldSafeExecuteJavaScript: true
+		}
+	});
+	mainWindow.loadURL(`file://${__dirname}/electron-index.html`);
+	mainWindow.webContents.openDevTools();
+	mainWindow.on('closed', function () {
+		mainWindow = null;
+	});
+}
+
+app.on('ready', createWindow);
+
+app.on('window-all-closed', function () {
+	if (process.platform !== 'darwin') {
+		app.quit();
+	}
+});
+
+app.on('activate', function () {
+	if (mainWindow === null) {
+		createWindow();
+	}
+});
--- a/samples/electron-amd-nodeIntegration/package.json
+++ b/samples/electron-amd-nodeIntegration/package.json
@ -0,0 +1,7 @@
+{
+	"name": "electron-amd-node-integration",
+	"scripts": {
+		"execute": "node ../node_modules/electron/cli.js ."
+	},
+	"main": "./main"
+}
--- a/samples/electron-amd/electron-index.html
+++ b/samples/electron-amd/electron-index.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			http-equiv="Content-Security-Policy"
+			content="default-src 'none'; script-src file: 'sha256-AcqnkP3xWRYJaQ27hijK3b831+qsxvzEoSYt6PfGrRE='; style-src 'unsafe-inline' file:; font-src file:"
+		/>
+		<title>Monaco Editor!</title>
+		<style>
+			#container {
+				width: 500px;
+				height: 300px;
+				border: 1px solid #ccc;
+			}
+		</style>
+	</head>
+
+	<body>
+		<h1>Monaco Editor in Electron (without nodeIntegration)!</h1>
+		Note: Since Electron without nodeIntegration is very similar to a browser, you can have a look
+		at all the other `browser-` samples, as they should work just fine. <br /><br />
+		<div id="container"></div>
+	</body>
+
+	<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+	<script>
+		require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
+
+		require(['vs/editor/editor.main'], function () {
+			const editor = monaco.editor.create(document.getElementById('container'), {
+				value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+				language: 'javascript'
+			});
+		});
+	</script>
+</html>
--- a/samples/electron-amd/index.html
+++ b/samples/electron-amd/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Electron Sample</h2>
+
+		To run this sample, you need to
+		<a href="https://github.com/electron/electron/releases">download Electron</a>
+		and then execute:
+
+		<pre>
+$/electron-amd> electron main.js
+</pre
+		>
+	</body>
+</html>
--- a/samples/electron-amd/main.js
+++ b/samples/electron-amd/main.js
@ -0,0 +1,32 @@
+const electron = require('electron');
+const app = electron.app;
+const BrowserWindow = electron.BrowserWindow;
+
+let mainWindow;
+
+function createWindow() {
+	mainWindow = new BrowserWindow({
+		width: 800,
+		height: 600,
+		webPreferences: { worldSafeExecuteJavaScript: true }
+	});
+	mainWindow.loadURL(`file://${__dirname}/electron-index.html`);
+	mainWindow.webContents.openDevTools();
+	mainWindow.on('closed', function () {
+		mainWindow = null;
+	});
+}
+
+app.on('ready', createWindow);
+
+app.on('window-all-closed', function () {
+	if (process.platform !== 'darwin') {
+		app.quit();
+	}
+});
+
+app.on('activate', function () {
+	if (mainWindow === null) {
+		createWindow();
+	}
+});
--- a/samples/electron-amd/package.json
+++ b/samples/electron-amd/package.json
@ -0,0 +1,7 @@
+{
+	"name": "electron-amd",
+	"scripts": {
+		"execute": "node ../node_modules/electron/cli.js ."
+	},
+	"main": "./main"
+}
--- a/samples/electron-esm-webpack/.gitignore
+++ b/samples/electron-esm-webpack/.gitignore
@ -0,0 +1,2 @@
+/dist/*.js
+/dist/*.ttf
--- a/samples/electron-esm-webpack/dist/electron-index.html
+++ b/samples/electron-esm-webpack/dist/electron-index.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			http-equiv="Content-Security-Policy"
+			content="default-src 'none'; script-src file: 'sha256-AcqnkP3xWRYJaQ27hijK3b831+qsxvzEoSYt6PfGrRE='; style-src 'unsafe-inline' file:; font-src file:"
+		/>
+		<title>Monaco Editor!</title>
+		<style>
+			#container {
+				width: 500px;
+				height: 300px;
+				border: 1px solid #ccc;
+			}
+		</style>
+	</head>
+
+	<body>
+		<h1>Monaco Editor in Electron (without nodeIntegration)!</h1>
+		Note: Since Electron without nodeIntegration is very similar to a browser, you can have a look
+		at all the other `browser-` samples, as they should work just fine. <br /><br />
+		<div id="container"></div>
+	</body>
+
+	<script src="./app.bundle.js"></script>
+</html>
--- a/samples/electron-esm-webpack/index.js
+++ b/samples/electron-esm-webpack/index.js
@ -0,0 +1,24 @@
+import * as monaco from 'monaco-editor';
+
+self.MonacoEnvironment = {
+	getWorkerUrl: function (moduleId, label) {
+		if (label === 'json') {
+			return './json.worker.bundle.js';
+		}
+		if (label === 'css' || label === 'scss' || label === 'less') {
+			return './css.worker.bundle.js';
+		}
+		if (label === 'html' || label === 'handlebars' || label === 'razor') {
+			return './html.worker.bundle.js';
+		}
+		if (label === 'typescript' || label === 'javascript') {
+			return './ts.worker.bundle.js';
+		}
+		return './editor.worker.bundle.js';
+	}
+};
+
+monaco.editor.create(document.getElementById('container'), {
+	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+	language: 'javascript'
+});
--- a/samples/electron-esm-webpack/main.js
+++ b/samples/electron-esm-webpack/main.js
@ -0,0 +1,32 @@
+const electron = require('electron');
+const app = electron.app;
+const BrowserWindow = electron.BrowserWindow;
+
+let mainWindow;
+
+function createWindow() {
+	mainWindow = new BrowserWindow({
+		width: 800,
+		height: 600,
+		webPreferences: { worldSafeExecuteJavaScript: true }
+	});
+	mainWindow.loadURL(`file://${__dirname}/dist/electron-index.html`);
+	mainWindow.webContents.openDevTools();
+	mainWindow.on('closed', function () {
+		mainWindow = null;
+	});
+}
+
+app.on('ready', createWindow);
+
+app.on('window-all-closed', function () {
+	if (process.platform !== 'darwin') {
+		app.quit();
+	}
+});
+
+app.on('activate', function () {
+	if (mainWindow === null) {
+		createWindow();
+	}
+});
--- a/samples/electron-esm-webpack/package.json
+++ b/samples/electron-esm-webpack/package.json
@ -0,0 +1,8 @@
+{
+	"name": "electron-esm-webpack",
+	"main": "./main",
+	"scripts": {
+		"build": "node ../node_modules/webpack/bin/webpack.js --progress",
+		"execute": "node ../node_modules/electron/cli.js ."
+	}
+}
--- a/samples/electron-esm-webpack/webpack.config.js
+++ b/samples/electron-esm-webpack/webpack.config.js
@ -0,0 +1,29 @@
+const path = require('path');
+
+module.exports = {
+	entry: {
+		app: './index.js',
+		'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
+		'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
+		'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
+		'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
+		'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
+	},
+	output: {
+		globalObject: 'self',
+		filename: '[name].bundle.js',
+		path: path.resolve(__dirname, 'dist')
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			},
+			{
+				test: /\.ttf$/,
+				use: ['file-loader']
+			}
+		]
+	}
+};
--- a/samples/nwjs-amd-v2/index.html
+++ b/samples/nwjs-amd-v2/index.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title>Monaco Editor under nodewebkit</title>
+		<!--link rel="stylesheet" data-name="vs/editor/editor.main" href="/node_modules/monaco-editor/min/vs/editor/editor.main.css"-->
+		<!--link rel="stylesheet" type="text/css" href="/resources/css/flex-boxes.css"-->
+		<style type="text/css">
+			body,
+			#container {
+				margin: 0px;
+				padding: 0px;
+				box-sizing: border-box;
+			}
+			body {
+				height: 100vh;
+				overflow: hidden;
+			}
+			#container {
+				overflow: hidden;
+				height: 100vh;
+			}
+			.toolbox {
+				height: 200px;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="container"></div>
+	</body>
+
+	<!--script>
+		// Monaco uses a custom amd loader that over-rides node's require.
+		// Keep a reference to node's require so we can restore it after executing the amd loader file.
+		var nodeRequire1 = require;
+	</script-->
+	<!--script src="/node_modules/monaco-editor/min/vs/loader1.js"></script-->
+	<script>
+		var ERequire = require('../../node_modules/monaco-editor/min/vs/loader.js');
+		//__dirname == root path of you application
+		ERequire.config({
+			baseUrl: 'file:///' + __dirname + '/node_modules/monaco-editor/min/'
+		});
+
+		// workaround monaco-css not understanding the environment
+		self.module = undefined;
+		// workaround monaco-typescript not understanding the environment
+		self.process.browser = true;
+		ERequire(['vs/editor/editor.main'], function () {
+			var editor = monaco.editor.create(document.getElementById('container'), {
+				value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+				language: 'javascript',
+				theme: 'vs-dark'
+			});
+		});
+	</script>
+</html>
--- a/samples/nwjs-amd/index.html
+++ b/samples/nwjs-amd/index.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title>Hello World!</title>
+		<link
+			rel="stylesheet"
+			data-name="vs/editor/editor.main"
+			href="node_modules/monaco-editor/min/vs/editor/editor.main.css"
+		/>
+	</head>
+	<body>
+		<h1>Hello World!</h1>
+		<div id="container" style="width: 500px; height: 300px; border: 1px solid #ccc"></div>
+	</body>
+
+	<script>
+		// Monaco uses a custom amd loader that over-rides node's require.
+		// Keep a reference to node's require so we can restore it after executing the amd loader file.
+		var nodeRequire = require;
+	</script>
+	<script src="node_modules/monaco-editor/min/vs/loader.js"></script>
+	<script>
+		// Save Monaco's amd require and restore Node's require
+		var amdRequire = require;
+		require = nodeRequire;
+		require.nodeRequire = require;
+	</script>
+
+	<script>
+		amdRequire.config({
+			baseUrl: 'node_modules/monaco-editor/min'
+		});
+
+		// workaround monaco-css not understanding the environment
+		self.module = undefined;
+
+		// workaround monaco-typescript not understanding the environment
+		self.process.browser = true;
+
+		amdRequire(['vs/editor/editor.main'], function () {
+			var editor = monaco.editor.create(document.getElementById('container'), {
+				value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+				language: 'javascript'
+			});
+		});
+	</script>
+</html>
--- a/samples/package-lock.json
+++ b/samples/package-lock.json
--- a/samples/package.json
+++ b/samples/package.json
@ -0,0 +1,29 @@
+{
+	"name": "monaco-editor-samples",
+	"version": "0.0.1",
+	"private": true,
+	"description": "Samples for using the Monaco Editor",
+	"main": "index.js",
+	"scripts": {
+		"simpleserver": "yaserver --root ./ --port 8888"
+	},
+	"author": "Microsoft Corporation",
+	"license": "MIT",
+	"devDependencies": {
+		"css-loader": "^6.5.1",
+		"electron": "^15.3.1",
+		"file-loader": "^6.2.0",
+		"glob": "^7.2.0",
+		"html-webpack-plugin": "^5.5.0",
+		"monaco-editor-webpack-plugin": "^6.0.0",
+		"monaco-editor": "^0.30.1",
+		"style-loader": "^3.3.1",
+		"terser-webpack-plugin": "^5.2.5",
+		"ts-loader": "^9.2.6",
+		"typescript": "^4.4.4",
+		"webpack-cli": "^4.9.1",
+		"webpack-dev-server": "^4.5.0",
+		"webpack": "^5.64.1",
+		"yaserver": "^0.4.0"
+	}
+}