flash.moe/build.js

// IMPORTS
const fs = require('fs');
const swc = require('@swc/core');
const path = require('path');
const util = require('util');
const exec = util.promisify(require('child_process').exec);
const postcss = require('postcss');
const htmlminify = require('html-minifier-terser').minify;
const childProcess = require('child_process');
const utils = require('./assets/utils.js');
const assproc = require('./assets/assproc.js');

// CONFIG
const rootDir = __dirname;
const srcDir = path.join(rootDir, 'assets');
const srcCurrentInfo = path.join(srcDir, 'current.json');
const pubDir = path.join(rootDir, 'public');
const pubAssetsDir = path.join(pubDir, 'assets');

const isDebugBuild = fs.existsSync(path.join(rootDir, '.debug'));

const buildTasks = {
    js: [
        { source: 'common.js', target: '/assets', name: 'common.{hash}.js', },
        { source: '2021.js', target: '/assets', name: '2021.{hash}.js', },
        { source: 'ascii.js', target: '/assets', name: 'ascii.{hash}.js', },
        { source: 'whois.js', target: '/assets', name: 'whois.{hash}.js', },
    ],
    css: [
        { source: 'errors.css', target: '/', name: 'errors.css', },
        { source: 'common.css', target: '/assets', name: 'common.{hash}.css', },
        { source: '2021.css', target: '/assets', name: '2021.{hash}.css', },
        { source: 'ascii.css', target: '/assets', name: 'ascii.{hash}.css', },
        { source: 'whois.css', target: '/assets', name: 'whois.{hash}.css', },
    ],
    twig: [
        { source: 'errors/401', target: '/', name: 'error-401.html', },
        { source: 'errors/403', target: '/', name: 'error-403.html', },
        { source: 'errors/404', target: '/', name: 'error-404.html', },
        { source: 'errors/500', target: '/', name: 'error-500.html', },
        { source: 'errors/503', target: '/', name: 'error-503.html', },
    ],
};

// PREP
const postcssPlugins = [ require('autoprefixer')({ remove: false }) ];
if(!isDebugBuild)
    postcssPlugins.push(require('cssnano')({
        preset: [
            'cssnano-preset-default',
            {
                minifyGradients: false,
                reduceIdents: false,
                zindex: true,
            }
        ],
    }));

const swcJscOptions = {
    target: 'es2020',
    loose: false,
    externalHelpers: false,
    keepClassNames: true,
    preserveAllComments: false,
    transform: {},
    parser: {
        syntax: 'ecmascript',
        jsx: true,
        dynamicImport: false,
        privateMethod: false,
        functionBind: false,
        exportDefaultFrom: false,
        exportNamespaceFrom: false,
        decorators: false,
        decoratorsBeforeExport: false,
        topLevelAwait: true,
        importMeta: false,
    },
    transform: {
        react: {
            runtime: 'classic',
            pragma: '$er',
        },
    },
};

const htmlMinifyOptions = {
    collapseBooleanAttributes: true,
    collapseWhitespace: true,
    conservativeCollapse: false,
    decodeEntities: false,
    quoteCharacter: '"',
    removeAttributeQuotes: true,
    removeComments: true,
    removeEmptyAttributes: true,
    removeOptionalTags: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    sortAttributes: true,
    sortClassName: true,
};


// BUILD
(async () => {
    const files = {};

    console.log('Ensuring assets directory exists...');
    fs.mkdirSync(pubAssetsDir, { recursive: true });


    console.log();
    console.log('JS assets');
    for(const info of buildTasks.js) {
        console.log(`=> Building ${info.source}...`);

        let origTarget = undefined;
        if('es' in info) {
            origTarget = swcJscOptions.target;
            swcJscOptions.target = info.es;
        }

        const assprocOpts = {
            prefix: '#',
            entry: info.entry || 'main.js',
        };
        const swcOpts = {
            filename: info.source,
            sourceMaps: false,
            isModule: false,
            minify: !isDebugBuild,
            jsc: swcJscOptions,
        };

        const pubName = await assproc.process(path.join(srcDir, info.source), assprocOpts)
            .then(output => swc.transform(output, swcOpts))
            .then(output => {
                const name = utils.strtr(info.name, { hash: utils.shortHash(output.code) });
                const pubName = path.join(info.target || '', name);

                console.log(` Saving to ${pubName}...`);
                fs.writeFileSync(path.join(pubDir, pubName), output.code);

                return pubName;
            });

        if(origTarget !== undefined)
            swcJscOptions.target = origTarget;

        files[info.source] = pubName;
    }


    console.log();
    console.log('CSS assets');
    for(const info of buildTasks.css) {
        console.log(`=> Building ${info.source}...`);

        const sourcePath = path.join(srcDir, info.source);
        const assprocOpts = {
            prefix: '@',
            entry: info.entry || 'main.css',
        };
        const postcssOpts = { from: sourcePath };

        files[info.source] = await assproc.process(sourcePath, assprocOpts)
            .then(output => postcss(postcssPlugins).process(output, postcssOpts)
            .then(output => {
                const name = utils.strtr(info.name, { hash: utils.shortHash(output.css) });
                const pubName = path.join(info.target || '', name);

                console.log(` Saving to ${pubName}...`);
                fs.writeFileSync(path.join(pubDir, pubName), output.css);

                return pubName;
            }));
    }


    console.log();
    console.log('Twig assets');

    const renderCommand = path.join(rootDir, 'tools/render-tpl');

    for(const info of buildTasks.twig) {
        console.log(`=> Building ${info.source}...`);

        const { stdout, stderr } = await exec(`${renderCommand} ${info.source}`);
        let data = stdout;

        if(data.trim() === '') {
            console.error(stderr);
            continue;
        }

        if(!isDebugBuild)
            data = await htmlminify(data, htmlMinifyOptions);

        const name = utils.strtr(info.name, { hash: utils.shortHash(data) });
        const pubName = path.join(info.target || '', name);

        const fullPath = path.join(pubDir, pubName);
        const dirPath = path.dirname(fullPath);
        if(!fs.existsSync(dirPath))
            fs.mkdirSync(dirPath, { recursive: true });

        fs.writeFileSync(fullPath, data);

        files[info.source] = pubName;
    }


    console.log();
    console.log('Writing assets info...');
    fs.writeFileSync(srcCurrentInfo, JSON.stringify(files));


    console.log();
    console.log('Cleaning up old builds...');
    assproc.housekeep(pubAssetsDir);
})();