Fix issues with missing sourcemaps (#6572)

* Fix issues with missing sourcemaps

* Change sourcemap back from `'inline'` to `true`

* Specialcase `/preload.cjs.map` in server

* Address review

app/ide-desktop/lib/client/src/bin/server.ts

@@ -10,6 +10,8 @@ import createServer from 'create-servers'
 
 import * as contentConfig from 'enso-content-config'
 
+import * as paths from '../paths'
+
 const logger = contentConfig.logger
 
 // =================
@@ -18,20 +20,6 @@ const logger = contentConfig.logger
 
 const HTTP_STATUS_OK = 200
 
-// ======================
-// === URL Parameters ===
-// ======================
-
-/** Construct URL query with the given parameters. For each `key` - `value` pair,
- * `key=value` will be added to the query. */
-export function urlParamsFromObject(obj: Record<string, string>) {
-    const params = []
-    for (const [key, value] of Object.entries(obj)) {
-        params.push(`${key}=${encodeURIComponent(value)}`)
-    }
-    return params.length === 0 ? '' : '?' + params.join('&')
-}
-
 // ==============
 // === Config ===
 // ==============
@@ -110,7 +98,13 @@ export class Server {
         } else {
             const url = requestUrl.split('?')[0]
             const resource = url === '/' ? '/index.html' : requestUrl
-            const resourceFile = `${this.config.dir}${resource}`
+            // `preload.cjs` must be specialcased here as it is loaded by electron from the root,
+            // in contrast to all assets loaded by the window, which are loaded from `assets/` via
+            // this server.
+            const resourceFile =
+                resource === '/preload.cjs.map'
+                    ? `${paths.APP_PATH}${resource}`
+                    : `${this.config.dir}${resource}`
             fs.readFile(resourceFile, (err, data) => {
                 if (err) {
                     logger.error(`Resource '${resource}' not found.`)

app/ide-desktop/lib/client/src/index.ts

@@ -345,16 +345,17 @@ class App {
     /** Redirect the web view to `localhost:<port>` to see the served website. */
     loadWindowContent() {
         if (this.window != null) {
-            const urlCfg: Record<string, string> = {}
+            const searchParams: Record<string, string> = {}
             for (const option of this.args.optionsRecursive()) {
                 if (option.value !== option.default && option.passToWebApplication) {
-                    urlCfg[option.qualifiedName()] = String(option.value)
+                    searchParams[option.qualifiedName()] = option.value.toString()
                 }
             }
-            const params = server.urlParamsFromObject(urlCfg)
-            const address = `http://localhost:${this.serverPort()}${params}`
-            logger.log(`Loading the window address '${address}'.`)
-            void this.window.loadURL(address)
+            const address = new URL('http://localhost')
+            address.port = this.serverPort().toString()
+            address.search = new URLSearchParams(searchParams).toString()
+            logger.log(`Loading the window address '${address.toString()}'.`)
+            void this.window.loadURL(address.toString())
         }
     }
 
@@ -423,7 +424,7 @@ class App {
 // ===================
 
 process.on('uncaughtException', (err, origin) => {
-    console.error(`Uncaught exception: ${String(err)}\nException origin: ${origin}`)
+    console.error(`Uncaught exception: ${err.toString()}\nException origin: ${origin}`)
     electron.dialog.showErrorBox(common.PRODUCT_NAME, err.stack ?? err.toString())
     electron.app.exit(1)
 })

app/ide-desktop/lib/content/esbuild-config.ts

@@ -88,6 +88,7 @@ export function bundlerOptions(args: Arguments) {
         loader: {
             '.html': 'copy',
             '.css': 'copy',
+            '.map': 'copy',
             '.wasm': 'copy',
             '.svg': 'copy',
             '.png': 'copy',

build/build/paths.yaml

@@ -47,7 +47,7 @@
     gui/:
       assets/:
         dynamic-assets/: # Assets used by the WASM application.
-        pkg.js: # The `pks.js` artifact of wasm-pack WITH bundled snippets.
+        pkg.js: # The `pkg.js` artifact of wasm-pack WITH bundled snippets.
         pkg.js.map: # The sourcemap mapping to `pkg.js` generated by wasm-pack.
         pkg-opt.wasm: # The optimized WASM artifact.
         index.js:
@@ -60,7 +60,8 @@
       index.js: # The main JS bundle to load WASM and JS wasm-pack bundles.
       index.d.ts: # TypeScript types interface file.
       index.js.map: # The sourcemap mapping to `index.js`.
-      pkg.js: # The `pks.js` artifact of wasm-pack WITH bundled snippets.
+      pkg.js: # The `pkg.js` artifact of wasm-pack WITH bundled snippets.
+      pkg.js.map: # The sourcemap mapping to `pkg.js` generated by wasm-pack.
       pkg.wasm: # The `pks_bg.wasm` artifact of wasm-pack.
       pkg-opt.wasm: # The optimized `pks_bg.wasm`.
   distribution/:

build/build/src/project/wasm.rs

@@ -451,10 +451,16 @@ impl Artifact {
             index_d_ts: _,
             index_js_map: _,
             pkg_js,
+            pkg_js_map,
             pkg_wasm: _,
             pkg_opt_wasm,
         } = &self.0;
-        vec![dynamic_assets.as_path(), pkg_js.as_path(), pkg_opt_wasm.as_path()]
+        vec![
+            dynamic_assets.as_path(),
+            pkg_js.as_path(),
+            pkg_js_map.as_path(),
+            pkg_opt_wasm.as_path(),
+        ]
     }
 
     pub fn symlink_ensogl_dist(&self, linked_dist: &RepoRootTargetEnsoglPackLinkedDist) -> Result {