rollup-plugin-visualizer
Version:
Visualize and analyze your bundle to quickly see which modules are taking up space.
57 lines (51 loc) • 1.52 kB
JavaScript
/* eslint-disable @typescript-eslint/require-await */
import { promises as fs } from "node:fs";
import path from "node:path";
const htmlEscape = (str) => str
.replace(/&/g, "&")
.replace(/"/g, """)
.replace(/'/g, "'")
.replace(/</g, "<")
.replace(/>/g, ">");
const buildHtmlTemplate = (title, script, nodesData, style) => `
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>${htmlEscape(title)}</title>
<style>
${style}
</style>
</head>
<body>
<main></main>
<script>
/*<!--*/
${script}
/*-->*/
</script>
<script>
/*<!--*/
const data = ${nodesData};
const run = () => {
const width = window.innerWidth;
const height = window.innerHeight;
const chartNode = document.querySelector("main");
drawChart.default(chartNode, data, width, height);
};
window.addEventListener('resize', run);
document.addEventListener('DOMContentLoaded', run);
/*-->*/
</script>
</body>
</html>
`;
export const buildHtml = (template) => async ({ title, data }) => {
const [script, style] = await Promise.all([
fs.readFile(path.join(import.meta.dirname, "..", "..", "lib", `${template}.js`), "utf8"),
fs.readFile(path.join(import.meta.dirname, "..", "..", "lib", `${template}.css`), "utf8"),
]);
return buildHtmlTemplate(title, script, data, style);
};