WIP: put all svg refs in scenario file at build time

esbuild-server.mjs

@@ -2,7 +2,9 @@ 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 { JSDOM } = jsdom;
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 
 const colors = {
@@ -120,16 +122,50 @@ const resolveImportedSvg = {
         path: path.resolve('public', args.path),
       };
     });
+
+    build.onLoad({ filter: /\.svg$/ }, async (args) => {
+      const documentText = await fs.promises.readFile(args.path, 'utf8');
+      const mapsheetsText = await fs.promises.readFile('/usr/src/app/public/assets/images/mapsheets.svg', 'utf8');
+
+      // const fromFile = JSDOM.fromFile(args.path).then(dom => {
+      //   console.log('fromFile', dom.serialize());
+      // });
+
+      const dom = new JSDOM(documentText);
+      const document = dom.window.document;
+      const doc = (new JSDOM(mapsheetsText)).window.document;
+      const refs = [];
+
+      document.querySelectorAll('use[href*=".svg"').forEach(el => {
+        const fragId = el.getAttributeNS(null, 'href').split('.svg').pop();
+        const frag = doc.querySelector(fragId);
+        frag.querySelectorAll('use').forEach(el => refs.push(el.getAttributeNS(null, 'href')));
+        if (el.style.transform) frag.style.transform = el.style.transform;
+        el.replaceWith(frag);
+      });
+
+      const refsQuery = [...new Set([...refs])].join(', ');
+      const refNodes = doc.querySelectorAll(refsQuery);
+      const defs = document.querySelector('defs');
+
+      refNodes.forEach(n => defs.appendChild(n));
+
+      return {
+        contents: '<?xml version="1.0" standalone="no"?>' + document.querySelector('svg').outerHTML,
+        loader: 'file',
+        watchFiles: ['/usr/src/app/public/assets/images/mapsheets.svg']
+      }
+    });
   }
 }
 
 const ctx = await esbuild.context({
-  entryPoints: ['src/*.js'],
+  entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js'],
   bundle: true,
   outdir: 'build',
   plugins: [resolveImportedSvg],
   loader: {
-    '.svg': 'text'
+    '.svg': 'file'
   },
   assetNames: 'assets/images/[name]-[hash]',
 });