render-template.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. "use strict";
  2. var __importDefault = (this && this.__importDefault) || function (mod) {
  3. return (mod && mod.__esModule) ? mod : { "default": mod };
  4. };
  5. Object.defineProperty(exports, "__esModule", { value: true });
  6. exports.renderTemplate = void 0;
  7. /* eslint-disable @typescript-eslint/require-await */
  8. const fs_1 = require("fs");
  9. const path_1 = __importDefault(require("path"));
  10. const htmlEscape = (str) => str
  11. .replace(/&/g, "&")
  12. .replace(/"/g, """)
  13. .replace(/'/g, "'")
  14. .replace(/</g, "&lt;")
  15. .replace(/>/g, "&gt;");
  16. const buildHtmlTemplate = (title, script, nodesData, style) => `
  17. <!DOCTYPE html>
  18. <html lang="en">
  19. <head>
  20. <meta charset="UTF-8" />
  21. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  22. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  23. <title>${htmlEscape(title)}</title>
  24. <style>
  25. ${style}
  26. </style>
  27. </head>
  28. <body>
  29. <main></main>
  30. <script>
  31. /*<!--*/
  32. ${script}
  33. /*-->*/
  34. </script>
  35. <script>
  36. /*<!--*/
  37. const data = ${nodesData};
  38. const run = () => {
  39. const width = window.innerWidth;
  40. const height = window.innerHeight;
  41. const chartNode = document.querySelector("main");
  42. drawChart.default(chartNode, data, width, height);
  43. };
  44. window.addEventListener('resize', run);
  45. document.addEventListener('DOMContentLoaded', run);
  46. /*-->*/
  47. </script>
  48. </body>
  49. </html>
  50. `;
  51. const buildHtml = (template) => async ({ title, data }) => {
  52. const [script, style] = await Promise.all([
  53. fs_1.promises.readFile(path_1.default.join(__dirname, "..", "lib", `${template}.js`), "utf8"),
  54. fs_1.promises.readFile(path_1.default.join(__dirname, "..", "lib", `${template}.css`), "utf8"),
  55. ]);
  56. return buildHtmlTemplate(title, script, JSON.stringify(data), style);
  57. };
  58. const outputRawData = (data) => JSON.stringify(data, null, 2);
  59. const outputPlainTextList = (data) => {
  60. var _a;
  61. const bundles = {};
  62. for (const meta of Object.values(data.nodeMetas)) {
  63. for (const [bundleId, uid] of Object.entries(meta.moduleParts)) {
  64. // eslint-disable-next-line @typescript-eslint/no-unused-vars
  65. const { metaUid: mainUid, ...lengths } = data.nodeParts[uid];
  66. bundles[bundleId] = (_a = bundles[bundleId]) !== null && _a !== void 0 ? _a : [];
  67. bundles[bundleId].push([meta.id, lengths]);
  68. }
  69. }
  70. const bundlesEntries = Object.entries(bundles).sort((e1, e2) => e1[0].localeCompare(e2[0]));
  71. let output = "";
  72. const IDENT = " ";
  73. for (const [bundleId, files] of bundlesEntries) {
  74. output += bundleId + ":\n";
  75. files.sort((e1, e2) => e1[0].localeCompare(e2[0]));
  76. for (const [file, lengths] of files) {
  77. output += IDENT + file + ":\n";
  78. output += IDENT + IDENT + `rendered: ${String(lengths.renderedLength)}\n`;
  79. if (data.options.gzip) {
  80. output += IDENT + IDENT + `gzip: ${String(lengths.gzipLength)}\n`;
  81. }
  82. if (data.options.brotli) {
  83. output += IDENT + IDENT + `brotli: ${String(lengths.brotliLength)}\n`;
  84. }
  85. }
  86. }
  87. return output;
  88. };
  89. const TEMPLATE_TYPE_RENDERED = {
  90. network: buildHtml("network"),
  91. sunburst: buildHtml("sunburst"),
  92. treemap: buildHtml("treemap"),
  93. "raw-data": async ({ data }) => outputRawData(data),
  94. list: async ({ data }) => outputPlainTextList(data),
  95. };
  96. const renderTemplate = (templateType, options) => {
  97. return TEMPLATE_TYPE_RENDERED[templateType](options);
  98. };
  99. exports.renderTemplate = renderTemplate;