WIP: implement build status plugin

esbuild-server.mjs

@@ -24,6 +24,55 @@ const mime = {
   '.html': 'text/html; 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) {
@@ -80,13 +129,6 @@ const importSvg = {
         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)`,
-    // }));
   }
 };
 
@@ -174,11 +216,16 @@ const ctx = await esbuild.context({
   entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js'],
   bundle: true,
   outdir: 'build',
-  plugins: [resolveSvgImports, externalSvgToInternal],
+  plugins: [
+    resolveSvgImports,
+    externalSvgToInternal,
+    // buildStatusPlugin
+  ],
   loader: {
     '.svg': 'file'
   },
   assetNames: 'assets/images/[name]-[hash]',
+  metafile: true
 });
 
 await ctx.watch();
@@ -231,6 +278,7 @@ http.createServer((req, res) => {
       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);
     });
 

public/index.html

@@ -244,7 +244,9 @@
     <input type="file" accept="image/svg+xml"/>
 
     <script>
-      new EventSource('/esbuild').addEventListener('change', () => location.reload());
+      const source = new EventSource('/esbuild');
+      source.addEventListener('change', () => location.reload());
+      source.addEventListener('message', (e) => console.log(e));
     </script>
     <script src="index.js"></script>
     <script src="soldier_record_block.js"></script>