import * as esbuild from 'esbuild';
import * as fs from 'node:fs';
import http from 'node:http';
import path from 'node:path';
import { JSDOM } from 'jsdom';
const __dirname = path.dirname(new URL(import.meta.url).pathname);
const colors = {
reset: '\x1b[0m',
dim: '\x1b[2m',
bright: '\x1b[1m',
normal: '\x1b[22m',
red: '\x1b[31m',
green: '\x1b[32m',
yellow: '\x1b[33m',
};
const mime = {
'.svg': 'image/svg+xml; charset=utf-8',
'.png': 'image/png',
'.jpg': 'image/jpeg',
'.css': 'text/css; charset=utf-8',
'.html': 'text/html; charset=utf-8',
};
const importSvg = {
name: 'importSvg',
setup(build) {
const regex = new RegExp(/\.svg$/);
build.onResolve({ filter: /\*\.svg$/ }, args => {
console.log('onresolve', args);
return {
path: path.join('public', 'assets', args.path),
namespace: 'svg-stub'
}
});
build.onLoad({ filter: /\.svg$/, namespace: 'svg-stub' }, async (args) => {
console.log('onload', args);
const svgs = fs.readdirSync(path.resolve(path.dirname(args.path))).filter(fn => regex.test(fn));;
console.log(svgs);
console.log('resolved path', path.join(path.dirname(args.path), 'mapsheets.svg'));
console.log('cwd', process.cwd());
// const contents = `import mapsheets from ./${path.join(path.dirname(args.path), 'mapsheets.svg')};
// console.log('mapsheets', mapsheets);
// export default mapsheets;`;
// const contents = `
// import svg from '/usr/src/app/public/assets/images/scenario-side_show.svg';
// export default svg;
// `;
// const contents = `
// import svg from '/usr/src/app/public/assets/images/scenario-side_show.svg';
// export default svg;
// `;
// const contents = `
// export { default as scenario_sideShow } from '/usr/src/app/public/assets/images/scenario-side_show.svg';
// export { default as mapsheets } from '/usr/src/app/public/assets/images/mapsheets.svg';
// `;
const contents = `
// export { default as countorLines } from './contour-lines.svg';
export { default as mapsheets } from './mapsheets.svg';
`;
console.log('resolveDir', path.dirname(args.path));
console.log('contents', contents);
return {
contents: contents,
resolveDir: path.dirname(args.path) //'./public/assets/images'
}
});
// build.onLoad({ filter: /.*/, namespace: 'svg-stub' }, async (args) => ({
// contents: `import svg from ${JSON.stringify(args.path)}
// export default (imports) =>
// WebAssembly.instantiate(wasm, imports).then(
// result => result.instance.exports)`,
// }));
}
};
const svgUseCacheBust = {
name: 'svgUseCacheBust',
setup(build) {
const regex = new RegExp('mapsheets\..+\.svg');
build.onStart(() => {
console.log("BUILD START");
// const version = Date.now();
// 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`);
})
}
};
const resolveImportedSvg = {
name: 'resolveImportedSvg',
setup(build) {
build.onStart(() => {
console.log("BUILD STARTED");
});
build.onResolve({ filter: /\.svg$/ }, args => {
return {
path: path.resolve('public', args.path),
};
});
}
}
const externalSvgToInternal = {
name: 'externalSvgToInternal',
setup(build) {
build.onLoad({ filter: /\.svg$/ }, async (args) => {
const document = (await JSDOM.fromFile(args.path)).window.document;
const externalResourceEls = Array.from(document.querySelectorAll('use[href*=".svg"'));
const refs = externalResourceEls.reduce((acc, el) => {
const href = el.getAttributeNS(null, 'href');
const [filename] = href.match(/.+\.svg/);
const fragmentIdentifier = href.split('.svg').pop();
(acc[filename] ??= new Set()).add(fragmentIdentifier);
el.setAttributeNS(null, 'href', fragmentIdentifier);
return acc;
}, {});
await Promise.all(
Object.keys(refs).map(filename => JSDOM.fromFile(path.join(path.dirname(args.path), filename)))
).then(result => {
const defs = document.querySelector('defs');
Object.keys(refs).forEach((filename, index) => {
const external = result[index].window.document;
refs[filename].forEach(fragmentIdentifier => {
external
.querySelectorAll(`${fragmentIdentifier} use`)
.forEach(el => refs[filename].add(el.getAttributeNS(null, 'href')));
});
const refsQuery = [...refs[filename]].join(', ');
external.querySelectorAll(refsQuery).forEach(node => defs.appendChild(node));
});
});
return {
contents: `\n${document.querySelector('svg').outerHTML}`,
loader: 'file',
watchFiles: Object.keys(refs).map(filename => path.join(path.dirname(args.path), filename))
}
});
}
}
const ctx = await esbuild.context({
entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js'],
bundle: true,
outdir: 'build',
plugins: [resolveImportedSvg, externalSvgToInternal],
loader: {
'.svg': 'file'
},
assetNames: 'assets/images/[name]-[hash]',
});
await ctx.watch();
const { host, port } = await ctx.serve({
servedir: 'build',
port: 3000,
// 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}`);
// },
});
http.createServer((req, res) => {
const options = {
hostname: host,
port: port,
path: req.url,
method: req.method,
headers: req.headers,
}
const filename = req.url && req.url !== '/' ? req.url : 'index.html';
const filepath = path.join(__dirname, 'public', filename);
if (fs.existsSync(filepath)) {
const readStream = fs.createReadStream(filepath, { autoClose: true });
readStream.on('ready', () => {
const type = mime[path.parse(filepath).ext] || 'application/octet-stream';
console.log(`${req.method} ${req.url} => 200 ${type}`);
res.writeHead(200, { 'content-type': type });
readStream.pipe(res, { end: true });
});
readStream.on('error', err => {
console.log(`${req.method} ${req.url} => 500 ${filepath} ${err.name}`);
res.writeHead(500, err.name);
res.end(JSON.stringify(err));
});
} else {
const proxyReq = http.request(options, proxyRes => {
const type = proxyRes.headers['content-type'];
console.log(`${req.method} ${req.url} => ${proxyRes.statusCode} ${type} via esbuild`);
res.writeHead(proxyRes.statusCode, { 'content-type': type });
proxyRes.pipe(res);
});
req.pipe(proxyReq, { end: true });
}
}).listen(8080);