Refactor esbuild server file

esbuild-server.mjs

@@ -3,6 +3,8 @@ import * as fs from 'node:fs';
 import http from 'node:http';
 import path from 'node:path';
 
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+
 const colors = {
   reset: '\x1b[0m',
   dim: '\x1b[2m',
@@ -11,9 +13,15 @@ const colors = {
   red: '\x1b[31m',
   green: '\x1b[32m',
   yellow: '\x1b[33m',
-}
+};
 
-let version;
+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',
@@ -100,16 +108,30 @@ const svgUseCacheBust = {
   }
 };
 
-const paths = ['/esbuild', '/index.js', '/map.js', '/soldier_record_block.js'];
+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 ctx = await esbuild.context({
   entryPoints: ['src/*.js'],
   bundle: true,
   outdir: 'build',
-  plugins: [svgUseCacheBust, importSvg],
+  plugins: [resolveImportedSvg],
   loader: {
     '.svg': 'file'
   },
+  assetNames: 'assets/images/[name]-[hash]',
 });
 
 await ctx.watch();
@@ -117,17 +139,17 @@ await ctx.watch();
 const { host, port } = await ctx.serve({
   servedir: 'build',
   port: 3000,
-  onRequest: function({ remoteAddress, method, path, status, timeInMS }) {
+  // onRequest: function({ remoteAddress, method, path, status, timeInMS }) {
-    let statusColor = colors.red;
+  //   let statusColor = colors.red;
 
-    if (status >= 200 && status <= 299) {
+  //   if (status >= 200 && status <= 299) {
-      statusColor = colors.green;
+  //     statusColor = colors.green;
-    } else if (status >= 300 && status <= 399) {
+  //   } else if (status >= 300 && status <= 399) {
-      statusColor = colors.yellow;
+  //     statusColor = colors.yellow;
-    }
+  //   }
 
-    console.log(`${colors.dim}${remoteAddress} - "${method} ${path}" ${colors.normal}${statusColor}${status}${colors.reset}${colors.dim} [${timeInMS}ms]${colors.reset}`);
+  //   console.log(`${colors.dim}${remoteAddress} - "${method} ${path}" ${colors.normal}${statusColor}${status}${colors.reset}${colors.dim} [${timeInMS}ms]${colors.reset}`);
-  },
+  // },
 });
 
 http.createServer((req, res) => {
@@ -139,55 +161,32 @@ http.createServer((req, res) => {
     headers: req.headers,
   }
 
-  if (paths.includes(req.url)) {
+  const filename = req.url && req.url !== '/' ? req.url : 'index.html';
-    const proxyReq = http.request(options, proxyRes => {
+  const filepath = path.join(__dirname, 'public', filename);
-      for (const k in proxyRes.headers) {
-        res.setHeader(k, proxyRes.headers[k]);
-      }
 
-      res.writeHead(proxyRes.statusCode, { 'Cache-Control': 'no-cache, no-store, must-revalidate' });
+  if (fs.existsSync(filepath)) {
+    const readStream = fs.createReadStream(filepath, { autoClose: true });
 
-      proxyRes.pipe(res, { end: true });
+    readStream.on('ready', () => {
-    })
+      const type = mime[path.parse(filepath).ext] || 'application/octet-stream';
-
+      console.log(`${req.method} ${req.url} => 200 ${type}`);
-    return req.pipe(proxyReq, { end: true });
+      res.writeHead(200, { 'content-type': type });
-  }
+      readStream.pipe(res, { end: true });
-
-  console.log(host, port, req.method, req.url, res.statusCode);
-
-  const serverUrl = `http://localhost:${port}`;
-  const url = new URL(`${serverUrl}${req.url}`);
-  const dir = 'public';
-
-  const filePath = path.normalize(
-    path.join(dir, url.pathname === '/' ? 'index.html' : url.pathname)
-  );
-
-  console.log('filepath', filePath);
-
-  for (const k in res.headers) {
-    res.setHeader(k, res.headers[k]);
-  }
-
-  let contentType;
-
-  if (req.url.endsWith('.svg')) {
-    contentType = 'image/svg+xml';
-  } else if (req.url.endsWith('.png')) {
-    contentType = 'image/png';
-  } else if (req.url.endsWith('.jpg')) {
-    contentType = 'image/jpeg';
-  } else if (req.url.endsWith('.css')) {
-    contentType = 'text/css';
-  } else {
-    contentType = 'text/html';
-  }
-
-  res.writeHead(res.statusCode, {
-    'Cache-Control': 'no-cache, no-store, must-revalidate',
-    'Content-Type': contentType
     });
 
-  const readStream = fs.createReadStream(filePath, { autoClose: true });
+    readStream.on('error', err => {
-  readStream.pipe(res, { end: true });
+      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);