NeoVan/parseComponent.js

import fs from "node:fs/promises";
import path from "path";
import htmlMinifier from "html-minifier-terser";
import esbuild from "esbuild";

const parseComponent = async (file)=>{
    const dir = path.dirname(file);
    let data = {};
    if(path.extname(file) === ".neovan"){
        data = await getNeovanData(file);
    }else{
        data = await parseHtml(file);
    }
    const bundle = await createBundle(data);
    writeFile(dir, bundle);
    fs.rm(path.join(dir, "tmp/"), {recursive: true, force: true});
}

const getNeovanData = async (index)=>{
    const neovan = await fs.readFile(index, "utf-8");
    const parentPath = path.dirname(index);
    
    const html = neovan.slice(neovan.indexOf("<contents>") + 10, neovan.indexOf("</contents>"));
    const css = neovan.slice(neovan.indexOf("<style>") + 7, neovan.indexOf("</style>"));
    const js = neovan.slice(neovan.indexOf("<script>") + 8, neovan.indexOf("</script>"));

    const cssFile = path.join(parentPath, `tmp/${path.basename(index, ".neovan")}.css`);
    const jsFile = path.join(parentPath, `tmp/${path.basename(index, ".neovan")}.js`);

    await fs.mkdir(path.join(parentPath, "tmp/"));

    await Promise.all([
        css === "" ? null : fs.writeFile(cssFile, css),
        js === "" ? null : fs.writeFile(jsFile, js)
    ]);

    return {
        html: html,
        css: cssFile,
        js: jsFile,
        dir: parentPath
    };
}

const parseHtml = async (index)=>{
    const parentPath = path.dirname(index);
    const basename = path.basename(index, ".html");

    return {
        html: await fs.readFile(index, "utf-8"),
        css: path.join(parentPath, `${basename}.css`),
        js: path.join(parentPath, `${basename}.js`),
        dir: parentPath
    };
}

const createBundle = async (data)=>{
    const entryPoints = [];
    if(data.css) entryPoints.push(data.css);
    if(data.js) entryPoints.push(data.js);

    data.html = await addComponents(data.html, data.dir);

    const esbuildProm = esbuild.build({
        entryPoints: entryPoints,
        bundle: true,
        minify: true,
        write: false,
        outdir: "/"
    });
    const htmlProm = htmlMinifier.minify(data.html, {
        collapseBooleanAttributes: true,
        collapseInlineTagWhitespace: true,
        collapseWhitespace: true,
        decodeEntities: true,
        html5: true,
        includeAutoGeneratedTags: false,
        noNewlinesBeforeTagClose: true,
        removeComments: true,
        useShortDoctype: true
    });

    const [buildData, html] = await Promise.all([esbuildProm, htmlProm]);

    const comps = {html: html};
    for(let i = 0; i < buildData.outputFiles.length; i++){
        const ext = path.extname(buildData.outputFiles[i].path).replace(".", "");
        comps[ext] = buildData.outputFiles[i].text;
    }

    return mergeFiles(comps);
}

const mergeFiles = (comps)=>{
    const cssIndex = comps.html.indexOf("</head>");
    const html = `${comps.html.slice(0, cssIndex)}<style>${comps.css}</style>${comps.html.slice(cssIndex)}`;

    const jsIndex = html.indexOf("</body>");
    return `${html.slice(0, jsIndex)}<script>${comps.js}</script>${html.slice(jsIndex)}`;
}

const writeFile = async (dir, bundle)=>{
    const writeDir = dir.replace("routes", ".build");
    await fs.mkdir(writeDir, {recursive: true});
    await fs.writeFile(`${writeDir}/index.html`, bundle);
}

const addComponents = async (html, dir)=>{
    let importStart = 0;
    for(let i = 0; i < html.length; i++){
        if(html[i] === "@"){
            if(html[i-1] === "<"){
                importStart = i + 1;
            }else if(html[i+1] === ">"){
                const importString = html.substring(importStart, i).trim();
                console.log(importString);
                const comp = await parseComponent(path.join(dir, importString))
                console.log(comp);
                html = html.slice(0, importStart - 2) + comp + html.slice(i+1);
            }
        }
    }
    return html;
}

export default parseComponent;