1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
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}`);
},
});
|