Add localization support to statemachine example

index.html

@@ -23,7 +23,8 @@ <h3>Python language client and language server</h3>
         Please execute <b><code>npm run start:example:server:python</code></b> beforehand:<br>
         <a href="packages/examples/python.html">Client for Python Pyright Language Server</a>
         <h3>Langium client and language server</h3>
-        <a href="packages/examples/statemachine_client.html">Client & Statemachine LS (Web Worker)</a>
+        <a href="packages/examples/statemachine_client.html">Client & Statemachine LS (Web Worker)</a><br>
+        Localizations: <a href="packages/examples/statemachine_client.html?locale=de">German</a> <a href="packages/examples/statemachine_client.html?locale=es">French</a> and <a href="packages/examples/statemachine_client.html?locale=fr">Spanish</a><br>
         <h3>Other examples</h3>
         <a href="packages/examples/browser.html">Browser Example</a>
         <br><br>

packages/examples/package.json

@@ -52,6 +52,9 @@
     "@codingame/monaco-vscode-textmate-service-override": "~1.83.3-next.0",
     "@codingame/monaco-vscode-theme-defaults-default-extension": "~1.83.3-next.0",
     "@codingame/monaco-vscode-theme-service-override": "~1.83.3-next.0",
+    "@codingame/monaco-vscode-language-pack-de": "~1.83.3-next.0",
+    "@codingame/monaco-vscode-language-pack-es": "~1.83.3-next.0",
+    "@codingame/monaco-vscode-language-pack-fr": "~1.83.3-next.0",
     "express": "~4.18.2",
     "langium": "~2.0.2",
     "langium-statemachine-dsl": "~2.0.0",

packages/examples/src/langium/localeLoader.ts

@@ -0,0 +1,28 @@
+/* --------------------------------------------------------------------------------------------
+ * Copyright (c) 2018-2022 TypeFox GmbH (http://www.typefox.io). All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ * ------------------------------------------------------------------------------------------ */
+
+export const loadLocales = async () => {
+    const locale = new URLSearchParams(window.location.search).get('locale');
+    const localeLoader: Partial<Record<string, () => Promise<void>>> = {
+        de: async () => {
+            await import('@codingame/monaco-vscode-language-pack-de');
+        },
+        es: async () => {
+            await import('@codingame/monaco-vscode-language-pack-es');
+        },
+        fr: async () => {
+            await import('@codingame/monaco-vscode-language-pack-fr');
+        }
+    };
+
+    if (locale != null) {
+        const loader = localeLoader[locale];
+        if (loader != null) {
+            await loader();
+        } else {
+            console.error(`Unknown locale ${locale}`);
+        }
+    }
+};

packages/examples/statemachine_client.html

@@ -11,8 +11,10 @@
     <h2>Client & Statemachine DSL Web Worker Language Server Example</h2>
     <div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
     <script type="module">
-        import { startStatemachineClient } from "./src/langium/statemachineClient.ts";
-        startStatemachineClient();
+        import { loadLocales } from "./src/langium/localeLoader.ts";
+        await loadLocales();
+        const { startStatemachineClient } = await import("./src/langium/statemachineClient.ts");
+        await startStatemachineClient();
     </script>
 </body>