Imported new 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])}, writable: false }`);
+
+                            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');
@@ -6,25 +7,42 @@ const postcss = require('postcss');
 const utils = require('./assets/utils.js');
 const assproc = require('./assets/assproc.js');
 
+
+// CONFIG
 const rootDir = __dirname;
-const modulesDir = path.join(rootDir, 'node_modules');
+const srcDir = path.join(rootDir, 'assets');
-
+const srcCurrentInfo = path.join(srcDir, 'current.json');
-const assetsDir = path.join(rootDir, 'assets');
-const assetsCSS = path.join(assetsDir, 'misuzu.css');
-const assetsJS = path.join(assetsDir, 'misuzu.js');
-const assetsInfo = path.join(assetsDir, 'current.json');
-
 const pubDir = path.join(rootDir, 'public');
-const pubIndex = path.join(pubDir, 'index.html');
+const pubAssetsDir = path.join(pubDir, 'assets');
-const pubAssets = '/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 buildTasks = {
+    js: [
+        { source: 'misuzu.js', target: '/assets', name: 'misuzu.{hash}.js', },
+    ],
+    css: [
+        { source: 'misuzu.css', target: '/assets', name: 'misuzu.{hash}.css', },
+    ],
+};
+
+
+// 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: 'es2021',
     loose: false,
     externalHelpers: false,
     keepClassNames: true,
@@ -51,39 +69,89 @@ const swcJscOptions = {
     },
 };
 
-const postcssPlugins = [];
-if(!isDebugBuild) postcssPlugins.push(require('cssnano'));
-postcssPlugins.push(require('autoprefixer')({
-    remove: false,
-}));
-
-fs.mkdirSync(pubAssetsFull, { recursive: true });
 
+// BUILD
 (async () => {
-    const mszCssName = await assproc.process(assetsCSS, { 'prefix': '@', 'entry': 'main.css' })
+    const files = {};
-        .then(output => postcss(postcssPlugins).process(output, { from: assetsCSS }).then(output => {
-            const mszCssName = path.join(pubAssets, util.format(pubAssetCSSFormat, 'misuzu', utils.shortHash(output.css)));
-            fs.writeFileSync(path.join(pubDir, mszCssName), output.css);
-            return mszCssName;
-        }));
 
-    const mszJsName = await assproc.process(assetsJS, { 'prefix': '#', 'entry': 'main.js' })
+    console.log('Ensuring assets directory exists...');
-        .then(output => swc.transform(output, {
+    fs.mkdirSync(pubAssetsDir, { recursive: true });
-            filename: 'misuzu.js',
+
+
+    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,
-        }).then(async output => {
+        };
-            const mszJsName = path.join(pubAssets, util.format(pubAssetJSFormat, 'misuzu', utils.shortHash(output.code)));
-            fs.writeFileSync(path.join(pubDir, mszJsName), output.code);
-            return mszJsName;
-        }));
 
-    fs.writeFileSync(assetsInfo, JSON.stringify({
+        const pubName = await assproc.process(path.join(srcDir, info.source), assprocOpts)
-        mszjs: mszJsName,
+            .then(output => swc.transform(output, swcOpts))
-        mszcss: mszCssName,
+            .then(output => {
-    }));
+                const name = utils.strtr(info.name, { hash: utils.shortHash(output.code) });
+                const pubName = path.join(info.target || '', name);
 
-    assproc.housekeep(pubAssetsFull);
+                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('Writing assets info...');
+    fs.writeFileSync(srcCurrentInfo, JSON.stringify(files));
+
+
+    console.log();
+    console.log('Cleaning up old builds...');
+    assproc.housekeep(pubAssetsDir);
 })();

src/MisuzuContext.php

@@ -201,7 +201,6 @@ class MisuzuContext {
         $isDebug = Environment::isDebug();
         $globals['site_info'] = $this->siteInfo;
         $globals['auth_info'] = $this->authInfo;
-        $globals['assets'] = $this->getWebAssetInfo();
         $globals['active_ban_info'] = $this->usersCtx->tryGetActiveBan($this->authInfo->getUserInfo());
         $globals['display_timings_info'] = $isDebug || $this->authInfo->getPerms('global')->check(Perm::G_TIMINGS_VIEW);
 

src/MisuzuSasaeExtension.php

@@ -11,9 +11,11 @@ use Twig\TwigFunction;
 
 final class MisuzuSasaeExtension extends AbstractExtension {
     private MisuzuContext $ctx;
+    private ?object $assets;
 
     public function __construct(MisuzuContext $ctx) {
         $this->ctx = $ctx;
+        $this->assets = $ctx->getWebAssetInfo();
     }
 
     public function getFilters() {
@@ -26,6 +28,7 @@ final class MisuzuSasaeExtension extends AbstractExtension {
 
     public function getFunctions() {
         return [
+            new TwigFunction('asset', $this->getAssetPath(...)),
             new TwigFunction('url', $this->ctx->getURLs()->format(...)),
             new TwigFunction('csrf_token', CSRF::token(...)),
             new TwigFunction('git_commit_hash', GitInfo::hash(...)),
@@ -39,6 +42,10 @@ final class MisuzuSasaeExtension extends AbstractExtension {
         ];
     }
 
+    public function getAssetPath(string $name): string {
+        return $this->assets?->{$name} ?? '';
+    }
+
     public function timeFormat(DateTime|string|int|null $dateTime): string {
         if($dateTime === null)
             return 'never';

templates/master.twig

@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         {% include '_layout/meta.twig' %}
         <link href="/vendor/fontawesome/css/all.min.css" type="text/css" rel="stylesheet">
-        <link href="{{ globals.assets.mszcss|default() }}" type="text/css" rel="stylesheet">
+        <link href="{{ asset('misuzu.css') }}" type="text/css" rel="stylesheet">
 {% if site_background is defined %}
         <style>
             :root {
@@ -57,6 +57,6 @@
             window.addEventListener('DOMContentLoaded', function() { Misuzu(); });
         </script>
         <script src="/vendor/highlightjs/highlight.min.js" type="text/javascript"></script>
-        <script src="{{ globals.assets.mszjs|default() }}" type="text/javascript"></script>
+        <script src="{{ asset('misuzu.js') }}" type="text/javascript"></script>
     </body>
 </html>