Updated asset build script.

assets/assproc.js

@@ -17,15 +17,10 @@ exports.process = async function(root, options) {
             return '';
         included.push(fullPath);
 
-        if(!fullPath.startsWith(root)) {
+        if(!fullPath.startsWith(root))
-            console.error('INVALID PATH: ' + fullPath);
             return '/* *** INVALID PATH: ' + fullPath + ' */';
-        }
+        if(!fs.existsSync(fullPath))
-
-        if(!fs.existsSync(fullPath)) {
-            console.error('FILE NOT FOUND: ' + fullPath);
             return '/* *** FILE NOT FOUND: ' + fullPath + ' */';
-        }
 
         const lines = readline.createInterface({
             input: fs.createReadStream(fullPath),
@@ -58,6 +53,19 @@ exports.process = async function(root, options) {
                         break;
                     }
 
+                    case 'buildvars':
+                        if(typeof options.buildVars === 'object') {
+                            const bvTarget = options.buildVarsTarget || 'window';
+                            const bvProps = [];
+
+                            for(const bvName in options.buildVars)
+                                bvProps.push(`${bvName}: { value: ${JSON.stringify(options.buildVars[bvName])} }`);
+
+                            if(Object.keys(bvProps).length > 0)
+                                output += `Object.defineProperties(${bvTarget}, { ${bvProps.join(', ')} });\n`;
+                        }
+                        break;
+
                     default:
                         output += line;
                         output += "\n";
@@ -84,7 +92,7 @@ exports.housekeep = function(assetsPath) {
         };
     }).sort((a, b) => b.lastMod - a.lastMod).map(info => info.name);
 
-    const regex = /^(.+)-([a-f0-9]+)\.(.+)$/i;
+    const regex = /^(.+)[\-\.]([a-f0-9]+)\.(.+)$/i;
     const counts = {};
 
     for(const fileName of files) {

assets/utils.js

@@ -1,5 +1,9 @@
 const crypto = require('crypto');
 
+exports.strtr = (str, replacements) => str.toString().replace(
+    /{([^}]+)}/g, (match, key) => replacements[key] || match
+);
+
 const trim = function(str, chars, flags) {
     if(chars === undefined)
         chars = " \n\r\t\v\0";

build.js

@@ -1,3 +1,4 @@
+// IMPORTS
 const fs = require('fs');
 const swc = require('@swc/core');
 const path = require('path');
@@ -5,32 +6,57 @@ 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 assetsDir = path.join(rootDir, 'assets');
+const srcCurrentInfo = path.join(srcDir, 'current.json');
-const assetsInfo = path.join(assetsDir, 'current.json');
-
 const pubDir = path.join(rootDir, 'public');
-const pubAssets = '/assets';
+const pubAssetsDir = path.join(pubDir, 'assets');
-const pubAssetsFull = path.join(pubDir, pubAssets);
-const pubAssetCSSFormat = '%s-%s.css';
-const pubAssetJSFormat = '%s-%s.js';
 
 const isDebugBuild = fs.existsSync(path.join(rootDir, '.debug'));
 
-const renderTemplates = [
+const buildTasks = {
-    { in: 'errors/401', out: '/error-401.html' },
+    js: [
-    { in: 'errors/403', out: '/error-403.html' },
+        { source: 'common.js', target: '/assets', name: 'common.{hash}.js', },
-    { in: 'errors/404', out: '/error-404.html' },
+        { source: '2021.js', target: '/assets', name: '2021.{hash}.js', },
-    { in: 'errors/500', out: '/error-500.html' },
+        { source: 'ascii.js', target: '/assets', name: 'ascii.{hash}.js', },
-    { in: 'errors/503', out: '/error-503.html' },
+        { source: 'whois.js', target: '/assets', name: 'whois.{hash}.js', },
-];
+    ],
+    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: 'es2016',
+    target: 'es2020',
     loose: false,
     externalHelpers: false,
     keepClassNames: true,
@@ -73,83 +99,122 @@ const htmlMinifyOptions = {
     sortClassName: true,
 };
 
-const postcssPlugins = [];
-if(!isDebugBuild) postcssPlugins.push(require('cssnano'));
-postcssPlugins.push(require('autoprefixer')({
-    remove: false,
-}));
-
-fs.mkdirSync(pubAssetsFull, { recursive: true });
 
+// BUILD
 (async () => {
-    console.log('Building assets...');
+    const files = {};
 
-    const dirs = fs.readdirSync(assetsDir);
+    console.log('Ensuring assets directory exists...');
-    const assets = {};
+    fs.mkdirSync(pubAssetsDir, { recursive: true });
 
-    const _postcss = postcss(postcssPlugins);
 
-    for(const dir of dirs) {
+    console.log();
-        const dirPath = path.join(assetsDir, dir);
+    console.log('JS assets');
-        if(!fs.statSync(dirPath).isDirectory())
+    for(const info of buildTasks.js) {
-            continue;
+        console.log(`=> Building ${info.source}...`);
 
-        const parts = dir.split('.', 2);
+        let origTarget = undefined;
-        if(parts.length < 2)
+        if('es' in info) {
-            continue;
+            origTarget = swcJscOptions.target;
-
+            swcJscOptions.target = info.es;
-        console.log();
-        console.log(dir);
-
-        let filePath = '';
-        let fileBody = '';
-
-        if(parts[1] === 'js') {
-            fileBody = await assproc.process(dirPath, { 'prefix': '#', 'entry': 'main.js' });
-            fileBody = (await swc.transform(fileBody, {
-                filename: dir,
-                sourceMaps: false,
-                isModule: false,
-                minify: !isDebugBuild,
-                jsc: swcJscOptions,
-            })).code;
-            filePath = path.join(pubAssets, util.format(pubAssetJSFormat, parts[0], utils.shortHash(fileBody)));
-        } else if(parts[1] === 'css') {
-            fileBody = await assproc.process(dirPath, { 'prefix': '@', 'entry': 'main.css' });
-            fileBody = (await _postcss.process(fileBody, { from: dir })).css;
-            filePath = path.join(pubAssets, util.format(pubAssetCSSFormat, parts[0], utils.shortHash(fileBody)));
         }
 
-        if(filePath !== '') {
+        const assprocOpts = {
-            assets[dir] = filePath;
+            prefix: '#',
-            fs.writeFileSync(path.join(pubDir, filePath), fileBody);
+            entry: info.entry || 'main.js',
-        } else console.error(`Unknown type: ${parts[1]}`);
+        };
+        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('Writing assets info...');
-    fs.writeFileSync(assetsInfo, JSON.stringify(assets));
 
-    console.log('Housekeeping...');
+    console.log();
-    assproc.housekeep(pubAssetsFull);
+    console.log('CSS assets');
+    for(const info of buildTasks.css) {
+        console.log(`=> Building ${info.source}...`);
 
-    console.log('Prerendering templates...');
+        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');
-    console.log(renderCommand);
 
-    for(const info of renderTemplates) {
+    for(const info of buildTasks.twig) {
-        console.log();
+        console.log(`=> Building ${info.source}...`);
-        console.log(info.in);
 
-        const { stdout, stderr } = await exec(`${renderCommand} ${info.in}`);
+        const { stdout, stderr } = await exec(`${renderCommand} ${info.source}`);
+        let data = stdout;
 
-        if(stdout.trim() === '') {
+        if(data.trim() === '') {
             console.error(stderr);
             continue;
         }
 
-        let body = await htmlminify(stdout, htmlMinifyOptions);
+        if(!isDebugBuild)
+            data = await htmlminify(data, htmlMinifyOptions);
 
-        fs.writeFileSync(path.join(pubDir, info.out), body);
+        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);
 })();