Fixes https://github.com/microsoft/monaco-editor/issues/4997 (#5090)

README.md

@@ -28,6 +28,15 @@ You will get:
 
 :warning: The monaco editor also ships an `AMD` build for backwards-compatibility reasons, but the `AMD` support is deprecated and will be removed in future versions.
 
+## Localization
+
+To load the editor in a specific language, make sure that the corresponding nls script file is loaded before the main monaco editor script. For example, to load the editor in German, include the following script tag:
+```html
+<script src="path/to/monaco-editor/esm/nls.messages.de.js"></script>
+```
+
+Check the sources for available languages.
+
 ## Concepts
 
 Monaco editor is best known for being the text editor that powers VS Code. However, it's a bit more nuanced. Some basic understanding about the underlying concepts is needed to use Monaco editor effectively.

build/esm/rollup.config.mjs

@@ -15,6 +15,8 @@ import nodeResolve from '@rollup/plugin-node-resolve';
 import { urlToEsmPlugin } from './rollup-url-to-module-plugin/index.mjs';
 import { copyFileSync, mkdirSync } from 'fs';
 import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { readdirSync } from 'fs';
 
 const root = join(import.meta.dirname, '../../');
 const outDir = join(root, './out/monaco-editor/esm');
@@ -40,6 +42,19 @@ const mappedPaths = {
 	[join(root, 'src/')]: 'vs/',
 };
 
+function getNlsEntryPoints() {
+	// Scan for nls.messages.*.js files dynamically
+	const nlsDir = dirname(fileURLToPath(import.meta.resolve('monaco-editor-core/esm/nls.messages.en.js')));
+	const nlsFiles = readdirSync(nlsDir)
+		.filter(file => file.startsWith('nls.messages.') && file.endsWith('.js'))
+		.reduce((acc, file) => {
+			// @ts-ignore
+			acc[file] = join(nlsDir, file);
+			return acc;
+		}, {});
+	return nlsFiles;
+}
+
 export default defineConfig({
 	input: {
 		entry: join(root, './src/editor/editor.main.ts'),
@@ -47,6 +62,7 @@ export default defineConfig({
 		edcoreMain: join(root, './src/editor/edcore.main.ts'),
 		editorApi: join(root, './src/editor/editor.api.ts'),
 		editorWorker: join(root, './src/editor/editor.worker.ts'),
+		...getNlsEntryPoints(),
 	},
 
 	output: {

src/editor/internal/editorWithLanguages.ts

@@ -1,10 +1,10 @@
-import * as css from '../../language/css/monaco.contribution.js';
+import * as css from '../../language/css/monaco.contribution';
-import * as html from '../../language/html/monaco.contribution.js';
+import * as html from '../../language/html/monaco.contribution';
-import * as json from '../../language/json/monaco.contribution.js';
+import * as json from '../../language/json/monaco.contribution';
-import * as typescript from '../../language/typescript/monaco.contribution.js';
+import * as typescript from '../../language/typescript/monaco.contribution';
-import '../../basic-languages/monaco.contribution.js';
+import '../../basic-languages/monaco.contribution';
 import * as lsp from '@vscode/monaco-lsp-client';
 
 export * from 'monaco-editor-core';
-export { createWebWorker, type IWebWorkerOptions } from '../../common/workers.js';
+export { createWebWorker, type IWebWorkerOptions } from '../../common/workers';
 export { css, html, json, typescript, lsp };

src/editor/internal/initialize.ts

@@ -1,4 +1,4 @@
-import * as monaco from 'monaco-editor-core/esm/vs/editor/editor.api.js';
+import * as monaco from 'monaco-editor-core/esm/vs/editor/editor.api';
 
 export function getGlobalMonaco(): any {
 	return monaco;