Răsfoiți Sursa

Refactor code to be easier to read.

Lee Morgan 3 săptămâni în urmă
părinte
comite
690aa7c1cf
2 a modificat fișierele cu 90 adăugiri și 71 ștergeri
  1. 3 71
      index.js
  2. 87 0
      parseDir.js

+ 3 - 71
index.js

@@ -1,8 +1,7 @@
 import fs from "node:fs/promises";
-import {constants} from "node:fs";
 import path from "path";
-import htmlMinifier from "html-minifier-terser";
-import esbuild from "esbuild";
+
+import parseDir from "./parseDir.js";
 
 const srcRoot = path.join(import.meta.dirname, "src");
 
@@ -22,74 +21,7 @@ const readFiles = async (dir)=>{
         }
     }
 
-    parse(dir);
-}
-
-const parse = async (dir)=>{
-    const htmlFile = path.join(dir, "index.html");
-    const cssFile = path.join(dir, "index.css");
-    const jsFile = path.join(dir, "index.js");
-
-    const buildFiles = [];
-    const checkFiles = [
-        fs.readFile(htmlFile, "utf-8"), 
-        fs.access(cssFile, constants.F_OK),
-        fs.access(jsFile, constants.F_OK)
-    ];
-    let [html, isCss, isJs] = await Promise.allSettled(checkFiles);
-    if(html.status !== "fulfilled") return;
-    isCss = isCss.status === "fulfilled";
-    isJs = isJs.status === "fulfilled";
-    if(isCss) buildFiles.push(cssFile);
-    if(isJs) buildFiles.push(jsFile);
-
-    html = await htmlMinifier.minify(html.value, {
-        collapseBooleanAttributes: true,
-        collapseInlineTagWhitespace: true,
-        collapseWhitespace: true,
-        conservativeCollapse: true,
-        decodeEntities: true,
-        noNewlinesBeforeTagClose: true,
-        removeComments: true
-    });
-
-    const esbuildProm = await esbuild.build({
-        entryPoints: buildFiles,
-        bundle: true,
-        minify: true,
-        write: false,
-        outdir: dir
-    });
-
-    if(isCss && isJs){
-        html = insert(html, esbuildProm.outputFiles[0].text, "css");
-        html = insert(html, esbuildProm.outputFiles[1].text, "js");
-    }else if(isCss){
-        html = insert(html, esbuildProm.outputFiles[0].text, "css");
-    }else if(isJs){
-        html = insert(html, esbuildProm.outputFiles[0].text, "js");
-    }
-
-    const writeDir = `${dir.replace("/src", "/.build")}`;
-    await fs.mkdir(writeDir, {recursive: true});
-    fs.writeFile(`${writeDir}/index.html`, html);
-}
-
-const insert = (html, insertString, type)=>{
-    let locationIndex, openTag, closeTag;
-    switch(type){
-        case "css":
-            locationIndex = html.indexOf("</head>");
-            openTag = "<style>"
-            closeTag = "</style>"
-            break;
-        case "js":
-            locationIndex = html.indexOf("</body>");
-            openTag = "<script>";
-            closeTag = "</script>"
-            break;
-    }
-    return `${html.slice(0, locationIndex)}${openTag}${insertString}${closeTag}${html.slice(locationIndex)}`;
+    await parseDir(dir);
 }
 
 main();

+ 87 - 0
parseDir.js

@@ -0,0 +1,87 @@
+import fs from "node:fs/promises";
+import {constants} from "node:fs";
+import path from "path";
+import htmlMinifier from "html-minifier-terser";
+import esbuild from "esbuild";
+
+export default async (dir)=>{
+    const existingFiles = await checkFiles(dir);
+    if(!existingFiles.html) return;
+    const content = await bundleFiles(existingFiles);
+    const html = mergeFiles(content);
+    writeHtml(dir, html);
+}
+
+const checkFiles = async (dir)=>{
+    let htmlPath = path.join(dir, "index.html");
+    let cssPath = path.join(dir, "index.css");
+    let jsPath = path.join(dir, "index.js");
+
+    let [html, css, js] = await Promise.allSettled([
+        fs.access(htmlPath, constants.F_OK),
+        fs.access(cssPath, constants.F_OK),
+        fs.access(jsPath, constants.f_OK)
+    ]);
+
+    if(html.status !== "fulfilled") return {html: null};
+    let files = {html: htmlPath};
+    if(css.status === "fulfilled") files.css = cssPath;
+    if(js.status === "fulfilled") files.js = jsPath;
+
+    return files;
+}
+
+const bundleFiles = async (files)=>{
+    const entryPoints = [];
+    if(files.css) entryPoints.push(files.css);
+    if(files.js) entryPoints.push(files.js);
+
+    const esbuildProm = esbuild.build({
+        entryPoints: entryPoints,
+        bundle: true,
+        minify: true,
+        write: false,
+        outdir: "/"
+    });
+    const htmlProm = fs.readFile(files.html, "utf-8");
+
+    const data = await Promise.all([esbuildProm, htmlProm]);
+    const contents = {
+        html: await htmlMinifier.minify(data[1], {
+            collapseBooleanAttributes: true,
+            collapseInlineTagWhitespace: true,
+            collapseWhitespace: true,
+            conservativeCollapse: false,
+            decodeEntities: true,
+            noNewlinesBeforeTagClose: true,
+            removeComments: true
+        }),
+        js: "",
+        css: ""
+    };
+
+    if(files.css && files.js){
+        contents.css = `<style>${data[0].outputFiles[0].text}</style>`;
+        contents.js = `<script>${data[0].outputFiles[1].text}</script>`;
+    }else if(files.css){
+        contents.css = `<style>${data[0].outputFiles[0].text}</style>`;
+    }else if(files.js){
+        contents.js = `<script>${data[0].outputFiles[0].text}</script>`;
+    }
+
+    return contents;
+}
+
+const mergeFiles = (contents)=>{
+    const cssIndex = contents.html.indexOf("</head>");
+    let html = `${contents.html.slice(0, cssIndex)}${contents.css}${contents.html.slice(cssIndex)}`;
+
+    const jsIndex = html.indexOf("</body>");
+    return `${html.slice(0, jsIndex)}${contents.js}${html.slice(jsIndex)}`;
+}
+
+const writeHtml = async (dir, html)=>{
+    const writeDir = `${dir.replace("/src", "/.build")}`;
+    await fs.mkdir(writeDir, {recursive: true});
+    fs.writeFile(`${writeDir}/index.html`, html);
+}