feat: sourcemap support for local dev

dist/BetterYTM.user.js

@@ -487,7 +487,7 @@ const scriptInfo = Object.freeze({
     name: GM.info.script.name,
     version: GM.info.script.version,
     namespace: GM.info.script.namespace,
-    lastCommit: "2af9133", // assert as generic string instead of union
+    lastCommit: "5390c55", // assert as generic string instead of union
 });
 
 
@@ -2526,7 +2526,7 @@ ytmusic-responsive-list-item-renderer .left-items {
 }
 
 
-/*# sourceMappingURL=main.css.map*/`, "global");
+/*# sourceMappingURL=http://localhost:8710/main.css.map*/`, "global");
         const features = yield (0,_config__WEBPACK_IMPORTED_MODULE_0__.loadFeatureConf)();
         (0,_utils__WEBPACK_IMPORTED_MODULE_2__.initSelectorExistsCheck)();
         (0,_utils__WEBPACK_IMPORTED_MODULE_2__.log)(`Initializing features for domain '${domain}'`);
@@ -2570,4 +2570,4 @@ preInit();
 
 }();
 
-//# sourceMappingURL=BetterYTM.user.js.map
+//# sourceMappingURL=http://localhost:8710/BetterYTM.user.js.map

src/tools/post-build.ts

@@ -15,6 +15,10 @@ const mode = process.argv.find((v) => v.trim().match(/^(--)?mode=production$/))
 const branch = mode === "production" ? "main" : "develop";
 const outFileSuffix = env.OUTFILE_SUFFIX ?? "";
 
+const envPort = Number(process.env.DEV_SERVER_PORT);
+/** HTTP port of the dev server */
+const devServerPort = isNaN(envPort) || envPort === 0 ? 8710 : envPort;
+
 const repo = "Sv443/BetterYTM";
 const userscriptDistFile = `BetterYTM${outFileSuffix}.user.js`;
 const distFolderPath = "./dist/";
@@ -85,6 +89,8 @@ const header = `\
 
     if(mode === "production")
       userscript = remSourcemapComments(userscript);
+    else
+      userscript = userscript.replace(/sourceMappingURL=/gm, `sourceMappingURL=http://localhost:${devServerPort}/`);
 
     // insert userscript header and final newline
     const finalUserscript = `${header}\n${userscript}${userscript.endsWith("\n") ? "" : "\n"}`;

src/tools/serve.ts

@@ -2,6 +2,7 @@ import express, { NextFunction, Request, Response } from "express";
 import { resolve } from "path";
 import { fileURLToPath } from "url";
 import { output as webpackCfgOutput } from "../../webpack.config.js";
+import "dotenv/config";
 
 const envPort = Number(process.env.DEV_SERVER_PORT);