ESBuild integration

README.md

@@ -22,7 +22,7 @@ cobalt doesn't remux any videos, so you get videos of max quality available (unl
     - [x] Sort contents of .json files
     - [x] Rename each entry key to be less linked to specific service (entries like youtubeBroke are awful, I'm sorry)
 - [x] Add support for more languages when localisation clean up is done
-- [ ] Use esmbuild to minify frontend css and js
+- [x] Use esmbuild to minify frontend css and js
 - [ ] Make switch buttons in settings selectable with keyboard
 - [ ] Do something about changelog because the way it is right now is not really great
 - [ ] Remake page rendering module to be more versatile

package.json

@@ -24,10 +24,12 @@
     "dependencies": {
         "cors": "^2.8.5",
         "dotenv": "^16.0.1",
+        "esbuild": "^0.14.49",
         "express": "^4.17.1",
         "express-rate-limit": "^6.3.0",
         "ffmpeg-static": "^5.0.0",
         "got": "^12.1.0",
+        "mime-types": "^2.1.35",
         "node-cache": "^5.1.2",
         "url-pattern": "^1.0.3",
         "xml-js": "^1.6.11",

src/cobalt.js

@@ -9,10 +9,14 @@ import { shortCommit } from "./modules/sub/currentCommit.js";
 import { appName, genericUserAgent, version, internetExplorerRedirect } from "./modules/config.js";
 import { getJSON } from "./modules/api.js";
 import renderPage from "./modules/pageRender.js";
-import { apiJSON } from "./modules/sub/utils.js";
+import { apiJSON, deepCopy } from "./modules/sub/utils.js";
 import loc from "./modules/sub/i18n.js";
 import { Bright, Cyan } from "./modules/sub/consoleText.js";
 import stream from "./modules/stream/stream.js";
+import { UUID } from "./modules/sub/crypto.js";
+import { buildJS, buildCSS } from "./modules/builder.js";
+import { lookup } from "mime-types";
+import { Readable } from "stream";
 
 const commitHash = shortCommit();
 const app = express();
@@ -109,18 +113,65 @@ if (fs.existsSync('./.env')) {
                 "hash": commitHash,
                 "type": "default",
                 "lang": req.header('Accept-Language') ? req.header('Accept-Language').slice(0, 2) : "en",
-                "useragent": req.header('user-agent') ? req.header('user-agent') : genericUserAgent
+                "useragent": req.header('user-agent') ? req.header('user-agent') : genericUserAgent,
+                "distUUID": req.app.get('currentDistUUID'),
             }))
         }
     });
     app.get("/favicon.ico", async (req, res) => {
         res.redirect('/icons/favicon.ico');
     });
+
+    app.head("/dist/:uuid/:file", (req, res) => {
+        let { uuid, file } = req.params,
+            dist = req.app.get(`dist~${uuid}`);
+
+        if (!dist || !dist.files.hasOwnProperty(file)) {
+            res.sendStatus(404);
+        }
+
+        res.setHeader('Content-Type', lookup(file));
+        res.setHeader('Content-Length', dist.files[file].length);
+
+        res.status(204);
+        res.end();
+        res.sendStatus(500);
+    });
+    app.get("/dist/:uuid/:file", (req, res) => {
+        let { uuid, file } = req.params,
+            dist = req.app.get(`dist~${uuid}`);
+
+        if (!dist || !dist.files.hasOwnProperty(file)) {
+            res.sendStatus(404);
+        }
+
+        res.setHeader('Content-Type', lookup(file));
+
+        const readableStream = Readable.from(dist.files[file]);
+        readableStream.pipe(res);
+    });
+
     app.get("/*", async (req, res) => {
         res.redirect('/')
     });
     app.listen(process.env.port, () => {
         console.log(`\n${Bright(`${appName} (${version})`)}\n\nURL: ${Cyan(`${process.env.selfURL}`)}\nPort: ${process.env.port}\nCurrent commit: ${Bright(`${commitHash}`)}\nStart time: ${Bright(Math.floor(new Date().getTime()))}\n`)
+
+        // Building JS and CSS with builder module
+        Promise.all([
+            buildJS(),
+            buildCSS()
+        ]).then(([js, css]) => {
+            let currentDistUUID = UUID(),
+                currentDist = { uuid: currentDistUUID, files: deepCopy(css.fontData) };
+
+            currentDist.files[`bundle.${commitHash}.js`] = js;
+            currentDist.files[`bundle.${commitHash}.css`] = css.code;
+
+            // e is real 2401
+            app.set('currentDistUUID', currentDistUUID);
+            app.set(`dist~${currentDistUUID}`, currentDist);
+        });
     });
 } else {
     console.log('Required config files are missing. Please run "npm run setup" first.')

src/modules/builder.js

@@ -0,0 +1,28 @@
+import { readFile, readdir } from "fs/promises";
+
+import * as esbuild from "esbuild";
+
+export async function buildJS () {
+    let originalJS = await readFile('./src/static/cobalt.js', { encoding: 'utf-8' }),
+        transformedJS = await esbuild.transform(originalJS, { minify: true });
+
+    return transformedJS.code
+}
+
+export async function buildCSS () {
+    let mainCSS = await readFile('./src/static/cobalt.css', { encoding: 'utf-8' }),
+        fontCSS = await readFile('./src/static/fonts/notosansmono/notosansmono.css', { encoding: 'utf-8' }),
+        fontFiles = (await readdir('./src/static/fonts/notosansmono/')).filter((f) => f.endsWith('.woff2')),
+        transformedCSS = await esbuild.transform(fontCSS + mainCSS, { minify: true, loader: 'css' });
+
+    const fontData = {}
+    for (let index in fontFiles) {
+        const filename = fontFiles[index]
+        fontData[filename] = await readFile(`./src/static/fonts/notosansmono/${filename}`, { encoding: 'utf-8' })
+    }
+
+    return {
+        code: transformedCSS.code,
+        fontData: fontData
+    }
+}

src/modules/pageRender.js

@@ -47,8 +47,7 @@ export default function(obj) {
         <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png" />
 
         <link rel="manifest" href="cobalt.webmanifest" />
-        <link rel="stylesheet" href="cobalt.css" />
-        <link rel="stylesheet" href="fonts/notosansmono/notosansmono.css" />
+        <link rel="stylesheet" href="dist/${obj.distUUID}/bundle.${obj.hash}.css" />
 
         <noscript><div style="margin: 2rem;">${loc(obj.lang, 'strings', 'noScript')}</div></noscript>
     </head>
@@ -194,7 +193,7 @@ export default function(obj) {
         </footer>
     </body>
     <script type="text/javascript">const loc = {noInternet:"${loc(obj.lang, 'apiError', 'noInternet')}"}</script>
-    <script type="text/javascript" src="cobalt.js"></script>
+    <script type="text/javascript" src="dist/${obj.distUUID}/bundle.${obj.hash}.js"></script>
 </html>`;
     } catch (err) {
         return `${loc('en', 'apiError', 'noRender', obj.hash)}`;

src/modules/sub/utils.js

@@ -49,4 +49,7 @@ export function cleanURL(url, host) {
         }
     }
     return url
+}
+export function deepCopy(object) {
+    return JSON.parse(JSON.stringify(object))
 }