From 4b93f8c23621f99a82aad5b29194f77a61504cab Mon Sep 17 00:00:00 2001
From: Kai Salmen <kai.salmen@typefox.io>
Date: Wed, 20 Mar 2024 14:43:58 +0100
Subject: [PATCH] Bundle code with vite/rollup for static serving

---
 packages/generator-langium/templates/web/.package.json    | 5 ++++-
 .../generator-langium/templates/web/src/setupCommon.ts    | 6 ++++--
 .../generator-langium/templates/web/src/setupExtended.ts  | 6 ++----
 .../templates/web/static/monacoClassic.html               | 4 ++--
 .../templates/web/static/monacoExtended.html              | 4 ++--
 packages/generator-langium/templates/web/vite.config.ts   | 8 ++++++--
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/generator-langium/templates/web/.package.json b/packages/generator-langium/templates/web/.package.json
index 1a6c2112a..3d26630d3 100644
--- a/packages/generator-langium/templates/web/.package.json
+++ b/packages/generator-langium/templates/web/.package.json
@@ -1,6 +1,8 @@
 {
     "scripts": {
         "build:web": "npm run build",
+        "bundle": "vite build",
+        "bundle:serve": "http-server ./dist --port 5175",
         "dev": "vite",
         "dev:debug": "vite --debug --force",
         "serve": "npm run dev"
@@ -15,6 +17,7 @@
     },
     "devDependencies": {
         "@codingame/esbuild-import-meta-url-plugin": "~1.0.2",
-        "vite": "~5.1.6"        
+        "vite": "~5.1.6",
+        "http-server": "~14.1.1"    
     }
 }
diff --git a/packages/generator-langium/templates/web/src/setupCommon.ts b/packages/generator-langium/templates/web/src/setupCommon.ts
index 575ade191..523b2caa3 100644
--- a/packages/generator-langium/templates/web/src/setupCommon.ts
+++ b/packages/generator-langium/templates/web/src/setupCommon.ts
@@ -25,9 +25,11 @@ export const configureMonacoWorkers = () => {
 };
 
 export const configureWorker = (): LanguageClientConfig => {
-    const workerURL = new URL('./language/main-browser.ts', import.meta.url);
+    const workerURL = new URL('./language/main-browser', import.meta.url);
     console.log(`Using the following  worker URL: ${workerURL.href}`);
-    const lsWorker = new Worker(workerURL.href, {
+
+    // vite does not extract the worker properly if it is in the workerURL variable
+    const lsWorker = new Worker(new URL('./language/main-browser', import.meta.url), {
         type: 'module',
         name: '<%= LanguageName %> Language Server'
     });
diff --git a/packages/generator-langium/templates/web/src/setupExtended.ts b/packages/generator-langium/templates/web/src/setupExtended.ts
index 82eaba1ff..27976b8c3 100644
--- a/packages/generator-langium/templates/web/src/setupExtended.ts
+++ b/packages/generator-langium/templates/web/src/setupExtended.ts
@@ -3,10 +3,8 @@ import { configureWorker, defineUserServices } from './setupCommon.js';
 
 export const setupConfigExtended = (): UserConfig => {
     const extensionFilesOrContents = new Map();
-    const languageConfigUrl = new URL('../language-configuration.json', window.location.href);
-    const textmateConfigUrl = new URL('../syntaxes/<%= language-id %>.tmLanguage.json', window.location.href);
-    extensionFilesOrContents.set('/language-configuration.json', languageConfigUrl);
-    extensionFilesOrContents.set('/<%= language-id %>-grammar.json', textmateConfigUrl);
+    extensionFilesOrContents.set('/language-configuration.json', new URL('../language-configuration.json', import.meta.url));
+    extensionFilesOrContents.set('/<%= language-id %>-grammar.json', new URL('../syntaxes/<%= language-id %>.tmLanguage.json', import.meta.url));
 
     return {
         wrapperConfig: {
diff --git a/packages/generator-langium/templates/web/static/monacoClassic.html b/packages/generator-langium/templates/web/static/monacoClassic.html
index 0ba28ed45..0bf475de2 100644
--- a/packages/generator-langium/templates/web/static/monacoClassic.html
+++ b/packages/generator-langium/templates/web/static/monacoClassic.html
@@ -20,8 +20,8 @@ <h1><%= RawLanguageName %> in Langium</h1>
         <!-- Monaco Configuration -->
         <script type="module">
             // vite is used to resolve the included TypeScript files
-            import { configureMonacoWorkers } from '../src/setupCommon.ts';
-            import { executeClassic } from '../src/setupClassic.ts';
+            import { configureMonacoWorkers } from '../src/setupCommon';
+            import { executeClassic } from '../src/setupClassic';
 
             configureMonacoWorkers();
             // keep a reference to a promise for when the editor is finished starting, we'll use this to setup the canvas on load
diff --git a/packages/generator-langium/templates/web/static/monacoExtended.html b/packages/generator-langium/templates/web/static/monacoExtended.html
index 1001e64f9..32761f4bd 100644
--- a/packages/generator-langium/templates/web/static/monacoExtended.html
+++ b/packages/generator-langium/templates/web/static/monacoExtended.html
@@ -20,8 +20,8 @@ <h1><%= RawLanguageName %> in Langium</h1>
         <!-- Monaco Configuration -->
         <script type="module">
             // vite is used to resolve the included TypeScript files
-            import { configureMonacoWorkers } from '../src/setupCommon.ts';
-            import { executeExtended } from '../src/setupExtended.ts';
+            import { configureMonacoWorkers } from '../src/setupCommon';
+            import { executeExtended } from '../src/setupExtended';
 
             configureMonacoWorkers();
             // keep a reference to a promise for when the editor is finished starting, we'll use this to setup the canvas on load
diff --git a/packages/generator-langium/templates/web/vite.config.ts b/packages/generator-langium/templates/web/vite.config.ts
index 259b177c7..ca7bb008d 100644
--- a/packages/generator-langium/templates/web/vite.config.ts
+++ b/packages/generator-langium/templates/web/vite.config.ts
@@ -9,8 +9,9 @@ export default defineConfig(() => {
             target: 'esnext',
             rollupOptions: {
                 input: {
-                    monacoClassic: path.resolve(__dirname, '/static/monacoClassic.html'),
-                    monacoExtended: path.resolve(__dirname, '/static/monacoExtended.html'),
+                    index: path.resolve(__dirname, 'index.html'),
+                    monacoClassic: path.resolve(__dirname, 'static/monacoClassic.html'),
+                    monacoExtended: path.resolve(__dirname, 'static/monacoExtended.html'),
                 }
             }
         },
@@ -23,6 +24,9 @@ export default defineConfig(() => {
                     importMetaUrlPlugin
                 ]
             }
+        },
+        server: {
+            port: 5173
         }
     };
     return config;