feat: md loader + medium refactor

.eslintrc.json

@@ -35,7 +35,8 @@
         "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/no-unused-vars": ["warn", { "ignoreRestSiblings": true, "argsIgnorePattern": "^_" }],
         "@typescript-eslint/ban-ts-comment": "off",
-        "comma-dangle": ["error", "only-multiline"]
+        "comma-dangle": ["error", "only-multiline"],
+        "no-misleading-character-class": "off"
     },
     "overrides": [
         {

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 test.js
+*.LICENSE.txt

README.md

@@ -36,12 +36,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 |
 
 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.  
-This makes it so the userscript automatically updates itself when the code changes.
+This makes it so the userscript automatically updates when the code changes.
 
 
 <br><br>

global.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Import HTML as modules  
+ * https://stackoverflow.com/a/47705264/3323672
+ */
+declare module "*.html" {
+  /** Content of the HTML file as a string */
+  const content: string;
+  export default content;
+}
+
+declare module "*.md" {
+  /** Content of the markdown file, converted to an HTML string */
+  const htmlContent: string;
+  export default htmlContent;
+}

package-lock.json

@@ -8,15 +8,22 @@
       "name": "betterytm",
       "version": "1.0.0",
       "license": "MIT",
+      "dependencies": {
+        "@billjs/event-emitter": "^1.0.3",
+        "marked": "^5.0.3"
+      },
       "devDependencies": {
         "@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",
         "html-loader": "^4.2.0",
         "http-server": "^14.1.1",
+        "markdown-loader": "^8.0.0",
         "nodemon": "^2.0.22",
+        "raw-loader": "^4.0.2",
         "ts-loader": "^9.4.3",
         "ts-node": "^10.9.1",
         "tslib": "^2.5.2",
@@ -127,6 +134,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/@billjs/event-emitter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@billjs/event-emitter/-/event-emitter-1.0.3.tgz",
+      "integrity": "sha512-ZvzKYD/Gk9HSq42jCHFlTXb3oJztspH7WTdlVU6WdW3MKk6Jja/wWhxRSpT07aDkU69pqdUl9zx6lpG6/qxO6g=="
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -392,6 +404,12 @@
       "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
       "dev": true
     },
+    "node_modules/@types/marked": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.0.tgz",
+      "integrity": "sha512-YcZe50jhltsCq7rc9MNZC/4QB/OnA2Pd6hrOSTOFajtabN+38slqgDDCeE/0F83SjkKBQcsZUj7VLWR0H5cKRA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.2.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.4.tgz",
@@ -889,7 +907,6 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "dev": true,
-      "peer": true,
       "peerDependencies": {
         "ajv": "^6.9.1"
       }
@@ -1006,6 +1023,15 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1348,6 +1374,15 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true
     },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.14.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz",
@@ -2418,6 +2453,44 @@
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true
     },
+    "node_modules/markdown-loader": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-loader/-/markdown-loader-8.0.0.tgz",
+      "integrity": "sha512-dxrR3WhK/hERbStPFb/yeNdEeWCKa2qUDdXiq3VTruBUWufOtERX04X0K44K4dnlN2i9pjSEzYIQJ3LjH0xkEw==",
+      "dev": true,
+      "dependencies": {
+        "marked": "^4.0.12"
+      },
+      "engines": {
+        "node": ">=12.22.9"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/markdown-loader/node_modules/marked": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+      "dev": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/marked": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-5.0.3.tgz",
+      "integrity": "sha512-KUONa43Uk74uUNWMxh6lfaNYmSAsRMiDAaX8QBCCRVXzEufR0zX6T33vrGbvTnQLL02ungDM3KSzZtO+chJaHg==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -2946,6 +3019,52 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/raw-loader/node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/raw-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3133,7 +3252,6 @@
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
       "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -4027,6 +4145,11 @@
         }
       }
     },
+    "@billjs/event-emitter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@billjs/event-emitter/-/event-emitter-1.0.3.tgz",
+      "integrity": "sha512-ZvzKYD/Gk9HSq42jCHFlTXb3oJztspH7WTdlVU6WdW3MKk6Jja/wWhxRSpT07aDkU69pqdUl9zx6lpG6/qxO6g=="
+    },
     "@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -4251,6 +4374,12 @@
       "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
       "dev": true
     },
+    "@types/marked": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.0.tgz",
+      "integrity": "sha512-YcZe50jhltsCq7rc9MNZC/4QB/OnA2Pd6hrOSTOFajtabN+38slqgDDCeE/0F83SjkKBQcsZUj7VLWR0H5cKRA==",
+      "dev": true
+    },
     "@types/node": {
       "version": "20.2.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.4.tgz",
@@ -4616,7 +4745,6 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "dev": true,
-      "peer": true,
       "requires": {}
     },
     "ansi-colors": {
@@ -4709,6 +4837,12 @@
         }
       }
     },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -4957,6 +5091,12 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true
     },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true
+    },
     "enhanced-resolve": {
       "version": "5.14.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz",
@@ -5760,6 +5900,28 @@
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true
     },
+    "markdown-loader": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-loader/-/markdown-loader-8.0.0.tgz",
+      "integrity": "sha512-dxrR3WhK/hERbStPFb/yeNdEeWCKa2qUDdXiq3VTruBUWufOtERX04X0K44K4dnlN2i9pjSEzYIQJ3LjH0xkEw==",
+      "dev": true,
+      "requires": {
+        "marked": "^4.0.12"
+      },
+      "dependencies": {
+        "marked": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+          "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+          "dev": true
+        }
+      }
+    },
+    "marked": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-5.0.3.tgz",
+      "integrity": "sha512-KUONa43Uk74uUNWMxh6lfaNYmSAsRMiDAaX8QBCCRVXzEufR0zX6T33vrGbvTnQLL02ungDM3KSzZtO+chJaHg=="
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -6157,6 +6319,35 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.2.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -6275,7 +6466,6 @@
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
       "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",

package.json

@@ -24,15 +24,22 @@
     "url": "https://github.com/Sv443/BetterYTM/issues"
   },
   "homepage": "https://github.com/Sv443/BetterYTM#readme",
+  "dependencies": {
+    "@billjs/event-emitter": "^1.0.3",
+    "marked": "^5.0.3"
+  },
   "devDependencies": {
     "@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",
     "html-loader": "^4.2.0",
     "http-server": "^14.1.1",
+    "markdown-loader": "^8.0.0",
     "nodemon": "^2.0.22",
+    "raw-loader": "^4.0.2",
     "ts-loader": "^9.4.3",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.2",

src/BetterYTM.user.ts

@@ -1,29 +1,17 @@
 import { getFeatures } from "./config";
-import { addMediaCtrlGeniusBtn, addMenu, addQueueGeniusBtns, addWatermark, geniUrlBase, initArrowKeySkip, initLayout, initSiteSwitch, removeUpgradeTab, setVolSliderSize, setVolSliderStep } from "./features/index";
+import { dbg, info } from "./constants";
+import { addMediaCtrlGeniusBtn, addMenu, addQueueGeniusBtns, addWatermark, geniUrlBase, initArrowKeySkip, initChangelog, initLayout as preInitLayout, initSiteSwitch, removeUpgradeTab, setVolSliderSize, setVolSliderStep } from "./features/index";
 import { getDomain } from "./utils";
 
-/** Set to true to enable debug mode for more output in the JS console */
-export const dbg = true;
-/** Specifies the hard limit for repetitive tasks */
-export const triesLimit = 50;
-/** Specifies the interval for repetitive tasks */
-export const triesInterval = 150;
-
-/** Info about the userscript, parsed from the userscript header (tools/post-build.js) */
-export const info = Object.freeze({
-  name: GM.info.script.name,
-  version: GM.info.script.version,
-  namespace: GM.info.script.namespace,
-});
-
 (async () => {
   //#MARKER init
 
   const features = await getFeatures();
 
-  await initLayout();
+  await preInitLayout();
 
   try {
+    // TODO: add some style
     console.log(`${info.name} v${info.version} - ${info.namespace}`);
     console.log(`Powered by lots of ambition and my song metadata API called geniURL: ${geniUrlBase}`);
 
@@ -33,6 +21,8 @@ export const info = Object.freeze({
     console.error("BetterYTM - General Error:", err);
   }
 
+  await initChangelog();
+
   /** Called when the DOM has finished loading (after `DOMContentLoaded` is emitted) */
   async function onDomLoad() {
     const domain = getDomain();

src/constants.ts

@@ -0,0 +1,13 @@
+/** Set to true to enable debug mode for more output in the JS console */
+export const dbg = true;
+/** Specifies the hard limit for repetitive tasks */
+export const triesLimit = 50;
+/** Specifies the interval for repetitive tasks */
+export const triesInterval = 150;
+
+/** Info about the userscript, parsed from the userscript header (tools/post-build.js) */
+export const info = Object.freeze({
+  name: GM.info.script.name,
+  version: GM.info.script.version,
+  namespace: GM.info.script.namespace,
+});

src/features/input.ts

@@ -1,5 +1,5 @@
 import { getVideoTime } from "../utils";
-import { dbg } from "../BetterYTM.user";
+import { dbg } from "../constants";
 import type { Domain } from "../types";
 
 //#MARKER arrow key skip

src/features/layout.ts

@@ -1,8 +1,9 @@
-import { dbg, info, triesInterval, triesLimit } from "../BetterYTM.user";
+import { dbg, info, triesInterval, triesLimit } from "../constants";
 import { defaultFeatures, getFeatures, saveFeatureConf } from "../config";
 import { addGlobalStyle, insertAfter } from "../utils";
 import { featInfo } from "./index";
 import type { FeatureConfig } from "../types";
+import changelog from "../../changelog.md";
 
 let features: FeatureConfig;
 
@@ -438,7 +439,7 @@ export function removeUpgradeTab() {
     console.error(`BetterYTM: Couldn't find upgrade tab to remove after ${removeUpgradeTries} tries`);
 }
 
-// #SECTION volume slider
+//#MARKER volume slider
 
 /** Sets the volume slider to a set size */
 export function setVolSliderSize() {
@@ -449,7 +450,7 @@ export function setVolSliderSize() {
 
   const style = `\
 .volume-slider.ytmusic-player-bar, .expand-volume-slider.ytmusic-player-bar {
-    width: ${size}px !important;
+  width: ${size}px !important;
 }`;
 
   addGlobalStyle(style, "vol_slider_size");
@@ -461,3 +462,19 @@ export function setVolSliderStep() {
 
   sliderElem.setAttribute("step", String(features.volumeSliderStep));
 }
+
+//#MARKER changelog
+
+export async function initChangelog() {
+  // console.log("#DEBUG _CHANGELOG:", changelog);
+  // const cl = document.createElement("div");
+  // cl.style.position = "fixed";
+  // cl.style.top = "0";
+  // cl.style.left = "0";
+  // cl.style.minWidth = "500px";
+  // cl.style.minHeight = "500px";
+  // cl.style.overflowY = "scroll";
+  // cl.innerHTML = changelog;
+  // document.addEventListener("DOMContentLoaded", () => document.body.appendChild(cl));
+  void ["TODO", changelog];
+}

src/features/lyrics.ts

@@ -1,4 +1,4 @@
-import { dbg, triesInterval, triesLimit } from "../BetterYTM.user";
+import { dbg, triesInterval, triesLimit } from "../constants";
 import { addGlobalStyle, insertAfter } from "../utils";
 
 /** Base URL of geniURL */

src/types.d.ts

@@ -1,12 +1,3 @@
-/**
- * Import HTML as modules
- * https://stackoverflow.com/a/47705264/3323672
- */
-declare module "*.html" {
-  const content: string;
-  export default content;
-}
-
 /** Which domain this script is currently running on */
 export type Domain = "yt" | "ytm";
 

src/utils.ts

@@ -1,10 +1,12 @@
-import { dbg } from "./BetterYTM.user";
+import { EventEmitter, EventHandler } from "@billjs/event-emitter";
+import { dbg } from "./constants";
+import type { Domain } from "./types";
 
 /**
  * Returns the current domain as a constant string representation
  * @throws Throws if script runs on an unexpected website
  */
-export function getDomain() {
+export function getDomain(): Domain {
   const { hostname } = new URL(location.href);
 
   if(hostname.includes("music.youtube"))
@@ -12,7 +14,7 @@ export function getDomain() {
   else if(hostname.includes("youtube"))
     return "yt";
   else
-    throw new Error("BetterYTM is running on an unexpected website");
+    throw new Error("BetterYTM is running on an unexpected website. Please don't tamper with the @match directives in the userscript header.");
 }
 
 /**
@@ -55,7 +57,7 @@ export function insertAfter(beforeNode: HTMLElement, afterNode: HTMLElement) {
  * @param style CSS string
  * @param ref Reference name that is included in the `<style>`'s ID - defaults to a random number if left undefined
  */
-export function addGlobalStyle(style: string, ref: string) {
+export function addGlobalStyle(style: string, ref?: string) {
   if(typeof ref !== "string" || ref.length === 0)
     ref = String(Math.floor(Math.random() * 10000));
 
@@ -66,3 +68,22 @@ export function addGlobalStyle(style: string, ref: string) {
 
   dbg && console.log(`BetterYTM: Inserted global style with ref '${ref}':`, styleElem);
 }
+
+interface SiteEvents extends EventEmitter {
+  /** Emitted whenever the site "changes" in a major way */
+  on(event: "change", handler: EventHandler): boolean;
+}
+
+class SiteEvents extends EventEmitter {
+  constructor() {
+    super();
+    document.addEventListener("DOMContentLoaded", this.initObserver);
+  }
+
+  initObserver() {
+    void "TODO: observe";
+  }
+}
+
+/** Emits all site-specific events */
+export const siteEvents = new SiteEvents();

tools/post-build.js

@@ -1,4 +1,4 @@
-const { readFile, writeFile } = require("fs/promises");
+const { readFile, writeFile, stat } = require("fs/promises");
 const package = require("../package.json");
 
 const userscriptName = "BetterYTM.user.js";
@@ -46,11 +46,12 @@ const header = `// ==UserScript==
     const path = `./${userscriptName}`;
     const input = String(await readFile(path));
     await writeFile(path, `${header}\n${input}${input.endsWith("\n") ? "" : "\n"}`);
-    console.info("Successfully added the userscript header!");
+    console.info("\nSuccessfully added the userscript header");
+    console.info(`\nFinal size is ${((await stat(path)).size / 1000).toFixed(2)} KB`);
   }
   catch(err) {
     console.error("Error while adding userscript header:");
     console.error(err);
-    process.exit(1);
+    setImmediate(() => process.exit(1));
   }
 })();

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "ES6",
+    "module": "NodeNext",
     "target": "ES2016",
     "outDir": ".",
     "allowJs": true,
@@ -21,5 +21,11 @@
   },
   "exclude": [
     "**/*.js",
-  ]
+  ],
+  "typeAcquisition": {
+    "enable": true,
+    "include": [
+      "types.d.ts",
+    ]
+  }
 }

webpack.config.js

@@ -8,35 +8,41 @@ module.exports = {
   //   minimize: false,
   // },
   module: {
-    rules: [{
-      test: /\.tsx?$/,
-      use: "ts-loader",
-      exclude: /node_modules/,
-    },
-    {
-      test: /\.html$/i,
-      loader: "html-loader",
-    },
-    // {
-    //   test: /\.s[ac]ss$/i,
-    //   use: [
-    //     "style-loader",
-    //     "css-loader",
-    //     "sass-loader",
-    //   ],
-    // },
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.html$/i,
+        loader: "html-loader",
+      },
+      {
+        test: /\.md$/,
+        use: [
+          {
+            loader: "html-loader",
+          },
+          {
+            loader: "markdown-loader",
+          },
+        ],
+      },
     ],
   },
-  plugins: [{
-    apply: (compiler) => {
-      compiler.hooks.afterEmit.tap("AfterEmitPlugin", () => {
-        exec("node ./tools/post-build.js", (_err, stdout, stderr) => {
-          stdout && process.stdout.write(`${stdout}\n`);
-          stderr && process.stderr.write(`${stderr}\n`);
+  plugins: [
+    {
+      apply: (compiler) => {
+        compiler.hooks.afterEmit.tap("AfterEmitPlugin", () => {
+          exec("node ./tools/post-build.js", (_err, stdout, stderr) => {
+            stdout && process.stdout.write(`${stdout}\n`);
+            stderr && process.stderr.write(`${stderr}\n`);
+          });
         });
-      });
-    }
-  }],
+      }
+    },
+  ],
   resolve: {
     extensions: [".ts", ".js"],
   },