WIP: use esbuild to bust cache for mapsheets.svg

esbuild-server.mjs

@@ -0,0 +1,122 @@
+// const esbuild = require('esbuild');
+// const fs = require('node:fs');
+
+import * as esbuild from 'esbuild';
+import * as fs from 'node:fs';
+
+const regex = new RegExp('mapsheets\..+\.svg');
+
+const svgUseCacheBust = {
+  name: 'svgUseCacheBust',
+  setup(build) {
+    build.onStart(() => {
+      const version = Date.now();
+      console.log(`Adding cache buster ${version}`);
+      const file = fs.readFileSync('./src/scenario-side_show.svg', { encoding: 'utf-8' });
+      const newFile = file.replaceAll('%%VERSION%%', version);
+      fs.writeFileSync('./public/assets/images/scenario-side_show.svg', newFile);
+      const files = fs.readdirSync('./public/assets/images').filter(fn => regex.test(fn));
+      files.forEach(fn => fs.unlinkSync(`./public/assets/images/${fn}`));
+      fs.copyFileSync('./public/assets/images/mapsheets.svg', `./public/assets/images/mapsheets.${version}.svg`);
+    })
+
+    // version = Math.random();
+    // build.onResolve({ filter: /svg/ }, args => {
+    //   console.log('onresolve', version, args);
+    // });
+  }
+}
+
+// {
+//   bundle: true,
+//   define: {
+//     'env': `"${process.env.NODE_ENV || 'dev'}"`,
+//   },
+//   entryPoints: ['src/index.js', 'src/map.js', 'src/soldier_record_block.js'],
+//   // outdir: 'build',
+//   ...(process.env.NODE_ENV !== 'test') && {
+//     outdir: 'build'
+//   },
+//   assetNames: `[name]${version}`,
+//   plugins: [svgUseCacheBust],
+//   loader: {
+//     '.svg': 'file'
+//   },
+// },
+
+// let ctx = await esbuild.context({
+//   entryPoints: ['src/*.js'],
+//   outdir: 'public',
+//   bundle: true,
+//   plugins: [svgUseCacheBust],
+//   loader: {
+//     '.svg': 'file'
+//   },
+// })
+
+// let { host, port } = await ctx.serve({
+//   servedir: 'public',
+// })
+
+const colors = {
+  reset: '\x1b[0m',
+  dim: '\x1b[2m',
+  bright: '\x1b[1m',
+  normal: '\x1b[22m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+}
+
+// esbuild.context({
+//   entryPoints: ['src/*.js'],
+//   outdir: 'public',
+//   bundle: true,
+//   plugins: [svgUseCacheBust],
+//   loader: {
+//     '.svg': 'file'
+//   },
+//   logLevel: 'info',
+// }).then(ctx => {
+//   console.log('context', ctx);
+
+//   ctx.serve({
+//     servedir: 'public',
+//     onRequest: function({ remoteAddress, method, path, status, timeInMS }) {
+//       let statusColor = colors.red;
+
+//       if (status >= 200 && status <= 299) {
+//         statusColor = colors.green;
+//       } else if (status >= 300 && status <= 399) {
+//         statusColor = colors.yellow;
+//       }
+
+//       console.log(`${colors.dim}${remoteAddress} - "${method} ${path}" ${colors.normal}${statusColor}${status}${colors.reset}${colors.dim} [${timeInMS}ms]${colors.reset}`);
+//     }
+//   })
+// });
+
+let ctx = await esbuild.context({
+  entryPoints: ['src/*.js'],
+  bundle: true,
+  outdir: 'public',
+  plugins: [svgUseCacheBust],
+});
+
+await ctx.watch();
+
+let { host, port } = await ctx.serve({
+  servedir: 'public',
+  port: 8080,
+  onRequest: function({ remoteAddress, method, path, status, timeInMS }) {
+    let statusColor = colors.red;
+
+    if (status >= 200 && status <= 299) {
+      statusColor = colors.green;
+    } else if (status >= 300 && status <= 399) {
+      statusColor = colors.yellow;
+    }
+
+    console.log(`${colors.dim}${remoteAddress} - "${method} ${path}" ${colors.normal}${statusColor}${status}${colors.reset}${colors.dim} [${timeInMS}ms]${colors.reset}`);
+  },
+});