Monaco-editor: hellow! how could we achieve localization with the esm import ?

[FAKER-A]

hellow! how could we achieve localization with the esm import ?

[blutorange]

I don't think this is supported yet, especially if you want to support multiple languages (see also https://github.com/Microsoft/monaco-editor/issues/784). I made a JSF/PrimeFaces wrapper for monacoeditor. That framework does not work well with require.js / loader.js so I used the ESM version. What I ended up doing essentially boils down to:

• Create a bundle with webpack
• Most localized text are hardcoded, but are still passed through a small helper function in vscode/nls.js. That function is also given an i18n key, but just returns the localized text. So I use the NormalModuleWebpackReplacementPlugin to replace that file with my own version that reads the localized text from a dynamic source.
• Now we need to get the translations for each i18n key. I pull from github.com/Microsoft/vscode-loc. It consists of many files, so I process them and write all i18n strings to one JS file.
• The i18n keys from that repo include the source file name of the file they are used in. This is not the case in the ESM version. So I preprocess the ESM code and replace all calls to nls.localize("my.key", args) with nls.localize("source/file.js", "my.key", args).
• Some translations are missing (see https://github.com/Microsoft/monaco-editor/issues/822), but fortunately, for most keys, localized texts are available with another i18n key. This can be fixed while generating the locales by mapping to these keys.
• To make the localized strings available to the webworkers as well, we can just wrap the webworker by creating our own webworker that first loads the locale, then proceeds to load the original webworker.

[FAKER-A]

I don't think this is supported yet, especially if you want to support multiple languages (see also #784). I made a JSF/PrimeFaces wrapper for monacoeditor. That framework does not work well with require.js / loader.js so I used the ESM version. What I ended up doing essentially boils down to:

• Create a bundle with webpack
• Most localized text are hardcoded, but are still passed through a small helper function in vscode/nls.js. That function is also given an i18n key, but just returns the localized text. So I use the NormalModuleWebpackReplacementPlugin to replace that file with my own version that reads the localized text from a dynamic source.
• Now we need to get the translations for each i18n key. I pull from github.com/Microsoft/vscode-loc. It consists of many files, so I process them and write all i18n strings to one JS file.
• The i18n keys from that repo include the source file name of the file they are used in. This is not the case in the ESM version. So I preprocess the ESM code and replace all calls to nls.localize("my.key", args) with nls.localize("source/file.js", "my.key", args).
• Some translations are missing (see #822), but fortunately, for most keys, localized texts are available with another i18n key. This can be fixed while generating the locales by mapping to these keys.
• To make the localized strings available to the webworkers as well, we can just wrap the webworker by creating our own webworker that first loads the locale, then proceeds to load the original webworker.

Thank you for your recovery

[FAKER-A]

I already have a solution, so I closed this issue.

[s97712]

I already have a solution, so I closed this issue.

can you share you solution?

[blutorange]

Afaik this is not supported officially. To elaborate on my comment above, I made a quick working example here: esm version of monaco editor with i18n support. I don't know about your use case, but perhaps this can help you get started.

[wang12124468]

You can use monaco-editor-esm-webpack-plugin to localize in esm.
Thanks to @blutorange's mind, I write a plugin to solute it.