331 lines
10 KiB
JavaScript
331 lines
10 KiB
JavaScript
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',
|
|
'.js': 'text/javascript; charset=utf-8',
|
|
};
|
|
|
|
function createServerSentEventHandler() {
|
|
const listeners = new Set();
|
|
const setupConnection = (req, res) => {
|
|
// res.writeHead(200, {
|
|
// 'Content-Type': 'text/event-stream',
|
|
// 'Cache-Control': 'no-cache',
|
|
// Connection: 'keep-alive',
|
|
// });
|
|
listeners.add(res);
|
|
// req.on('close', () => {
|
|
// listeners.delete(res);
|
|
// });
|
|
};
|
|
|
|
const sendMessage = (data) => {
|
|
listeners.forEach((res) => {
|
|
res.write(`data: ${JSON.stringify(data)}\n\n`);
|
|
});
|
|
};
|
|
|
|
return { setupConnection, sendMessage };
|
|
}
|
|
|
|
const buildListeners = createServerSentEventHandler();
|
|
|
|
const buildStatusPlugin = {
|
|
name: 'build-status',
|
|
setup(build) {
|
|
let buildStart = Date.now();
|
|
let buildResolver = () => {};
|
|
let buildPromise = Promise.resolve();
|
|
|
|
build.onStart(() => {
|
|
buildStart = Date.now();
|
|
buildPromise = new Promise((resolve) => {
|
|
buildResolver = resolve;
|
|
});
|
|
buildListeners.sendMessage({ type: 'build-start' });
|
|
});
|
|
build.onEnd((result) => {
|
|
const duration = Date.now() - buildStart;
|
|
buildStart = -1;
|
|
buildResolver();
|
|
const success = result.errors.length === 0;
|
|
buildListeners.sendMessage({ type: 'build-end', duration, success });
|
|
});
|
|
},
|
|
};
|
|
|
|
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'
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
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 resolveSvgImports = {
|
|
name: 'resolveSvgImports',
|
|
setup(build) {
|
|
let buildStart;
|
|
|
|
build.onStart(() => {
|
|
buildStart = Date.now();
|
|
console.log('Build started');
|
|
fs.rmSync(path.resolve(build.initialOptions.outdir), { recursive: true, force: true });
|
|
});
|
|
|
|
build.onResolve({ filter: /\.svg$/ }, args => {
|
|
return {
|
|
path: path.resolve('public', args.path),
|
|
};
|
|
});
|
|
|
|
build.onEnd(() => {
|
|
console.log(`Build completed in ${Date.now() - buildStart}ms`);
|
|
});
|
|
}
|
|
}
|
|
|
|
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.append(node));
|
|
});
|
|
});
|
|
|
|
return {
|
|
contents: `<?xml version="1.0" standalone="no"?>\n${document.querySelector('svg').outerHTML}`,
|
|
loader: 'file',
|
|
watchFiles: Object.keys(refs).map(filename => path.join(path.dirname(args.path), filename))
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
const buildOptions = {
|
|
entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js', 'src/radial.js'],
|
|
bundle: true,
|
|
outdir: 'build',
|
|
plugins: [
|
|
resolveSvgImports,
|
|
// externalSvgToInternal,
|
|
// buildStatusPlugin
|
|
],
|
|
loader: {
|
|
'.svg': 'file'
|
|
},
|
|
assetNames: 'assets/images/[name]-[hash]',
|
|
};
|
|
|
|
if (process.env.NODE_ENV === 'test') {
|
|
http.createServer((req, res) => {
|
|
const filename = req.url && req.url !== '/' ? req.url : 'index.html';
|
|
const filepath = ['public', 'build'].map(dir => path.join(__dirname, dir, filename)).find(fp => fs.existsSync(fp));
|
|
|
|
if (filepath) {
|
|
const readStream = fs.createReadStream(filepath, { autoClose: true });
|
|
|
|
readStream.on('ready', () => {
|
|
const type = mime[path.parse(filepath).ext] || 'text/plain';
|
|
res.writeHead(200, { 'content-type': type });
|
|
readStream.pipe(res, { end: true });
|
|
});
|
|
|
|
readStream.on('error', err => {
|
|
res.writeHead(500, err.name);
|
|
res.end(JSON.stringify(err));
|
|
});
|
|
} else {
|
|
res.writeHead(404, { 'content-type': 'text/plain' });
|
|
res.end("Not found");
|
|
}
|
|
}).listen(3005, () => {
|
|
const serverUrl = 'http://localhost:3005';
|
|
console.log(`Test server running at ${serverUrl}`);
|
|
});
|
|
} else {
|
|
buildOptions.define = { 'window.IS_DEV': 'true' };
|
|
const ctx = await esbuild.context(buildOptions);
|
|
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 });
|
|
// if (req.url === '/esbuild') buildListeners.setupConnection(req, res);
|
|
proxyRes.pipe(res);
|
|
});
|
|
|
|
req.pipe(proxyReq, { end: true });
|
|
}
|
|
}).listen(8080, (e) => {
|
|
const serverUrl = 'http://localhost:8080';
|
|
console.log(`Development server running at ${serverUrl}`);
|
|
});
|
|
}
|
|
|
|
// console.log(`${process.env.NODE_ENV === 'test' ? 'Test' : 'Development'} server running at ${server.url}`);
|