WIP: modify dev server to use as test server, also

esbuild-server.mjs

@@ -22,6 +22,7 @@ const mime = {
   '.jpg': 'image/jpeg',
   '.css': 'text/css; charset=utf-8',
   '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
 };
 
 function createServerSentEventHandler() {
@@ -220,7 +221,7 @@ const externalSvgToInternal = {
   }
 }
 
-const ctx = await esbuild.context({
+const buildOptions = {
   entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js'],
   bundle: true,
   outdir: 'build',
@@ -233,66 +234,95 @@ const ctx = await esbuild.context({
     '.svg': 'file'
   },
   assetNames: 'assets/images/[name]-[hash]',
-});
+};
 
-await ctx.watch();
+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));
 
-const { host, port } = await ctx.serve({
+    if (filepath) {
-  servedir: 'build',
+      const readStream = fs.createReadStream(filepath, { autoClose: true });
-  port: 3000,
-  // onRequest: function({ remoteAddress, method, path, status, timeInMS }) {
-  //   let statusColor = colors.red;
 
-  //   if (status >= 200 && status <= 299) {
+      readStream.on('ready', () => {
-  //     statusColor = colors.green;
+        const type = mime[path.parse(filepath).ext] || 'text/plain';
-  //   } else if (status >= 300 && status <= 399) {
+        res.writeHead(200, { 'content-type': type });
-  //     statusColor = colors.yellow;
+        readStream.pipe(res, { end: true });
-  //   }
+      });
 
-  //   console.log(`${colors.dim}${remoteAddress} - "${method} ${path}" ${colors.normal}${statusColor}${status}${colors.reset}${colors.dim} [${timeInMS}ms]${colors.reset}`);
+      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, () => {
+    console.log('test server is online');
+  });
+} else {
+  buildOptions.define = { 'window.IS_DEV': 'true' };
+  const ctx = await esbuild.context(buildOptions);
+  await ctx.watch();
 
-http.createServer((req, res) => {
+  const { host, port } = await ctx.serve({
-  const options = {
+    servedir: 'build',
-    hostname: host,
+    port: 3000,
-    port: port,
+    // onRequest: function({ remoteAddress, method, path, status, timeInMS }) {
-    path: req.url,
+    //   let statusColor = colors.red;
-    method: req.method,
-    headers: req.headers,
-  }
 
-  const filename = req.url && req.url !== '/' ? req.url : 'index.html';
+    //   if (status >= 200 && status <= 299) {
-  const filepath = path.join(__dirname, 'public', filename);
+    //     statusColor = colors.green;
+    //   } else if (status >= 300 && status <= 399) {
+    //     statusColor = colors.yellow;
+    //   }
 
-  if (fs.existsSync(filepath)) {
+    //   console.log(`${colors.dim}${remoteAddress} - "${method} ${path}" ${colors.normal}${statusColor}${status}${colors.reset}${colors.dim} [${timeInMS}ms]${colors.reset}`);
-    const readStream = fs.createReadStream(filepath, { autoClose: true });
+    // },
+  });
 
-    readStream.on('ready', () => {
+  http.createServer((req, res) => {
-      const type = mime[path.parse(filepath).ext] || 'application/octet-stream';
+    const options = {
-      console.log(`${req.method} ${req.url} => 200 ${type}`);
+      hostname: host,
-      res.writeHead(200, { 'content-type': type });
+      port: port,
-      readStream.pipe(res, { end: true });
+      path: req.url,
-    });
+      method: req.method,
+      headers: req.headers,
+    }
 
-    readStream.on('error', err => {
+    const filename = req.url && req.url !== '/' ? req.url : 'index.html';
-      console.log(`${req.method} ${req.url} => 500 ${filepath} ${err.name}`);
+    const filepath = path.join(__dirname, 'public', filename);
-      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 });
+    if (fs.existsSync(filepath)) {
-  }
+      const readStream = fs.createReadStream(filepath, { autoClose: true });
-}).listen(8080, (e) => {
+
-  console.log('server is online', e);
+      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) => {
+    console.log('server is online', e);
+  });
+}
 
 // console.log(`${process.env.NODE_ENV === 'test' ? 'Test' : 'Development'} server running at ${server.url}`);

public/index.html

@@ -3,11 +3,6 @@
   <head>
     <title>Infantry Combat Solo Basic</title>
     <link rel="stylesheet" href="assets/css/style.css">
-    <script>
-      const source = new EventSource('/esbuild');
-      source.addEventListener('change', () => location.reload());
-      // source.addEventListener('message', (e) => console.log(e));
-    </script>
   </head>
   <body>
     <template id="damage-block">

src/index.js

@@ -7,6 +7,12 @@ import { scenarios } from './modules/scenarios.js';
 
 globalThis.svgns = 'http://www.w3.org/2000/svg';
 
+if (window.IS_DEV) {
+  const source = new EventSource('/esbuild');
+  source.addEventListener('change', () => location.reload());
+  // source.addEventListener('message', (e) => console.log(e));
+}
+
 const mapPlaceholder = document.querySelector('.map-placeholder'),
   distanceOutput = document.getElementById('status'),
   proneToggle = document.getElementById('toggle-prone-counter'),

test/integration/setup.cjs

@@ -2,7 +2,7 @@ console.log('\nSpawning server process...');
 const { spawn } = require('child_process');
 
 module.exports = async function (globalConfig, projectConfig) {
-  const child = spawn('node', ['server.cjs']);
+  const child = spawn('node', ['esbuild-server.mjs']);
 
   child.stdout.on('data', (data) => {
     console.log(`${data}`);