Web Dev Solutions

Catalin Mititiuc

From a49c0caff2d8d76941eaceeddb871c20977b7080 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Thu, 30 May 2024 15:51:47 -0700 Subject: Build scenario files --- esbuild-server.mjs | 63 +++++---- public/assets/images/counters.svg | 24 ++-- public/assets/images/scenario-dragon_hunting.svg | 149 ++++++--------------- .../assets/images/scenario-race_against_time.svg | 103 ++++++++++---- public/assets/images/scenario-side_show.svg | 148 ++++++-------------- 5 files changed, 209 insertions(+), 278 deletions(-) diff --git a/esbuild-server.mjs b/esbuild-server.mjs index c43bd68..13cca8b 100644 --- a/esbuild-server.mjs +++ b/esbuild-server.mjs @@ -124,36 +124,49 @@ const resolveImportedSvg = { }); 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 document = (await JSDOM.fromFile(args.path)).window.document; + const externalResourceUseEls = Array.from(document.querySelectorAll('use[href*=".svg"')); + const readFiles = {}; + + const files = [...new Set([...externalResourceUseEls.map(el => + el.getAttributeNS(null, 'href').match(/.+\.svg/).at(0) + )])]; + + await Promise.all(files.map((filename) => + JSDOM + .fromFile(path.join(path.dirname(args.path), filename)) + .then(dom => readFiles[filename] = dom.window.document) + )); + + const refs = {}; + + externalResourceUseEls.forEach(el => { + const href = el.getAttributeNS(null, 'href'); + const [filename] = href.match(/.+\.svg/); + const fragId = href.split('.svg').pop(); + const frag = readFiles[filename].querySelector(fragId); + + if (frag) { + frag.querySelectorAll('use').forEach(el => + (refs[filename] ??= []).push(el.getAttributeNS(null, 'href')) + ); + + (refs[filename] ??= []).push(fragId); + el.setAttributeNS(null, 'href', fragId); + } }); - const refsQuery = [...new Set([...refs])].join(', '); - const refNodes = doc.querySelectorAll(refsQuery); - const defs = document.querySelector('defs'); - - refNodes.forEach(n => defs.appendChild(n)); + Object.keys(refs).forEach(filename => { + const refsQuery = [...new Set([...refs[filename]])].join(', '); + const refNodes = readFiles[filename].querySelectorAll(refsQuery); + const defs = document.querySelector('defs'); + refNodes.forEach(n => defs.appendChild(n)); + }); return { - contents: '' + document.querySelector('svg').outerHTML, + contents: `\n${document.querySelector('svg').outerHTML}`, loader: 'file', - watchFiles: ['/usr/src/app/public/assets/images/mapsheets.svg'] + watchFiles: Object.keys(readFiles).map(filename => path.join(path.dirname(args.path), filename)) } }); } diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg index 85936d0..238b2ec 100644 --- a/public/assets/images/counters.svg +++ b/public/assets/images/counters.svg @@ -7,28 +7,28 @@ 1 - - + + 2 - - + + 3 - - + + 4 - - + + 5 - - + + 6 - - + + 7 diff --git a/public/assets/images/scenario-dragon_hunting.svg b/public/assets/images/scenario-dragon_hunting.svg index 4443568..e456f27 100644 --- a/public/assets/images/scenario-dragon_hunting.svg +++ b/public/assets/images/scenario-dragon_hunting.svg @@ -1,5 +1,5 @@ - + @@ -232,6 +169,6 @@ - +