feat: custom dev server & readme stuff

README.md

@@ -46,12 +46,13 @@ Once you have the extension, click this button to install the userscript:
 ### Development:
 | Command | Description |
 | --- | --- |
-| `npm i` | Run once to install dependencies |
-| `npm run lint` | Lints the userscript with ESLint |
-| `npm run build` | Builds the userscript |
-| `npm run watch` | Watches, rebuilds and serves the userscript on port 8710, so it can be updated live if set up correctly in the userscript manager |
+| `npm i` | Run once to install dependencies |
+| `npm run lint` | Lints the userscript with ESLint |
+| `npm run build` | Builds the userscript |
+| `npm run watch` | Watches, rebuilds and serves the userscript on port 8710, so it can be updated live if set up correctly in the userscript manager. Configure request logging and more in `src/tools/serve.ts` |
+<!-- first column uses non-breaking space U+00A0 (' ') -->
 
-When using ViolentMonkey, after running the command `npm run watch`, open [`http://localhost:8710/BetterYTM.user.js`](http://localhost:8710/BetterYTM.user.js) and select the `Track local file` option.  
+When using ViolentMonkey, after running the command `npm run watch`, open [`http://localhost:8710/dist/BetterYTM.user.js`](http://localhost:8710/dist/BetterYTM.user.js) and select the `Track local file` option.  
 This makes it so the userscript automatically updates when the code changes.
 
 

package.json

@@ -10,7 +10,8 @@
     "test": "npm run node-ts -- ./test.ts",
     "build": "webpack",
     "post-build": "npm run node-ts -- ./src/tools/post-build.ts",
-    "serve": "http-server -s -c 5 -p 8710 .",
+    "serve": "npm run node-ts -- ./src/tools/serve.ts",
+    "serve-old": "http-server -s -c 5 -p 8710 .",
     "watch": "nodemon --exec \"npm run build && npm run serve\"",
     "lint": "eslint .",
     "node-ts": "node --no-warnings=ExperimentalWarning --enable-source-maps --loader ts-node/esm"
@@ -31,14 +32,15 @@
     "@billjs/event-emitter": "^1.0.3"
   },
   "devDependencies": {
+    "@types/express": "^4.17.17",
     "@types/greasemonkey": "^4.0.4",
     "@types/marked": "^5.0.0",
     "@types/node": "^20.2.4",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
     "eslint": "^7.32.0",
+    "express": "^4.18.2",
     "html-loader": "^4.2.0",
-    "http-server": "^14.1.1",
     "markdown-loader": "^8.0.0",
     "nodemon": "^2.0.22",
     "ts-loader": "^9.4.3",
@@ -63,4 +65,4 @@
       "dev/*"
     ]
   }
-}
+}

src/BetterYTM.user.ts

@@ -52,10 +52,10 @@ import {
           addWatermark();
 
         if(features.geniusLyrics)
-          await addMediaCtrlGeniusBtn();
+          addMediaCtrlGeniusBtn();
 
         if(features.queueButtons)
-          await addQueueButtons();
+          addQueueButtons();
 
         if(typeof features.volumeSliderSize === "number")
           setVolSliderSize();

src/tools/serve.ts

@@ -0,0 +1,34 @@
+import express, { NextFunction, Request, Response } from "express";
+const app = express();
+
+/** HTTP port of the dev server */
+const devServerPort = 8710;
+/** Whether to log requests to the console */
+const enableLogging = false;
+/** The folder where the packed userscript resides ("." if in the root dir) */
+const packedScriptDir = "dist";
+/** Name of the packed userscript file */
+const packedScriptName = "BetterYTM.user.js";
+
+app.use((req, res, next) => {
+  enableLogging && process.stdout.write("*");
+  next();
+});
+
+app.use((err: unknown, req: Request, res: Response, next: NextFunction) => {
+  if(typeof err === "string" || err instanceof Error)
+    console.error(`\x1b[31mError in dev server:\x1b[0m\n`, err);
+});
+
+app.use(express.static(packedScriptDir, {
+  etag: false,
+  maxAge: 5_000,
+}));
+
+app.listen(devServerPort, "0.0.0.0", () => {
+  console.log(`The dev server is running.\nUserscript is served at \x1b[34m\x1b[4mhttp://localhost:${devServerPort}/${packedScriptName}\x1b[0m`);
+  if(enableLogging)
+    process.stdout.write("\nRequests: ");
+  else
+    console.log("\x1b[2m(request logging is disabled)\x1b[0m");
+});