Web Dev Solutions

Catalin Mititiuc

From 981cc566f05a2c517aef8657bad605477d519b48 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Thu, 30 May 2024 12:37:29 -0700 Subject: WIP: put all svg refs in scenario file at build time --- esbuild-server.mjs | 40 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) (limited to 'esbuild-server.mjs') diff --git a/esbuild-server.mjs b/esbuild-server.mjs index 10816d5..c43bd68 100644 --- a/esbuild-server.mjs +++ b/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: '' + 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]', }); -- cgit v1.2.3