I scaffolded a Vite project, and instead of building the script to run at load-time in the browser, I would like it to generate the output at build-time. I am using vanilla typescript. Is there any way to manipulate the DOM at build time, then generate the results in the dist directory?
Please see the following code snippets for reference (if needed). Maybe I am not researching the topic correctly?
import data from "./data";
import "./style.css";
const usStatesElems = document.querySelectorAll('.us_state') as NodeListOf<SVGPathElement>;
const salesTeamLegendListElem = document.querySelector('.sales-team__list') as HTMLDivElement;
const otherTeamElem = document.querySelector('.other-team') as HTMLDivElement;
const salesTeamLegendItems = [];
for(let stateElem of usStatesElems){
for(let obj of data.salesTeam){
if(obj.states.includes(stateElem.id)){
stateElem.style.setProperty('fill', obj.color);
}
}
}
for(let obj of data.salesTeam){
for(let person of obj.people){
salesTeamLegendItems.push({
name: person,
color: obj.color
});
}
}
for(let item of salesTeamLegendItems){
const legendItemElem = document.createElement('div');
legendItemElem.classList.add('legend-item');
const legendColorLabel = document.createElement('div');
legendColorLabel.classList.add('legend-item__color-label');
legendColorLabel.style.setProperty('background-color', item.color);
const legendNameTextElem = document.createElement('div');
legendNameTextElem.classList.add('legend-item__name-text');
legendNameTextElem.innerText = item.name;
legendItemElem.insertAdjacentElement('beforeend', legendColorLabel);
legendItemElem.insertAdjacentElement('beforeend', legendNameTextElem);
salesTeamLegendListElem.insertAdjacentElement('beforeend', legendItemElem);
}
for(let item of data.otherSpecialties){
const roleItemElem = document.createElement('div');
roleItemElem.classList.add('other-team__role');
const titleHeaderElem = document.createElement('div');
titleHeaderElem.classList.add('list-header');
titleHeaderElem.innerText = item.title;
const peopleListElem = document.createElement('ul');
peopleListElem.classList.add('other-team__people-list');
for(let person of item.people){
const personListItemElem = document.createElement('li');
personListItemElem.classList.add('other-team__person');
personListItemElem.innerText = person;
peopleListElem.insertAdjacentElement('beforeend', personListItemElem);
}
roleItemElem.insertAdjacentElement('beforeend', titleHeaderElem);
roleItemElem.insertAdjacentElement('beforeend', peopleListElem);
otherTeamElem.insertAdjacentElement('beforeend', roleItemElem);
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Geo Map</title>
<style>
* {
margin:0;
padding:0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
</style>
</head>
<body>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
enable_background="new 0 0 1000 589"
height="589px"
pretty_print="False"
style="stroke-linejoin: round; stroke:#000; fill: none;"
version="1.1"
viewBox="0 0 1000 589"
width="1000px"
id="us_map" >
...
</svg>
<div class="legend">
<div class="sales-team">
<div class="list-header">Sales Team</div>
<div class="sales-team__list"></div>
</div>
<div class="other-team"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>