From 1b04583ae8784a0ec9dec3f8acb624fda73c879d Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Mon, 27 May 2024 10:51:19 -0700
Subject: WIP: use esbuild to bust cache for mapsheets.svg
---
esbuild-server.mjs | 122 +++
src/scenario-side_show.svg | 1973 ++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 2095 insertions(+)
create mode 100644 esbuild-server.mjs
create mode 100644 src/scenario-side_show.svg
diff --git a/esbuild-server.mjs b/esbuild-server.mjs
new file mode 100644
index 0000000..c49aa47
--- /dev/null
+++ b/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}`);
+ },
+});
diff --git a/src/scenario-side_show.svg b/src/scenario-side_show.svg
new file mode 100644
index 0000000..e4211a0
--- /dev/null
+++ b/src/scenario-side_show.svg
@@ -0,0 +1,1973 @@
+
+
--
cgit v1.2.3