From 1bd40d51cbf9d33fcbff491165b25e6efcfd8ef3 Mon Sep 17 00:00:00 2001
From: Viorel Cojocaru <vio@beanon.com>
Date: Wed, 15 Jan 2025 20:09:17 +0100
Subject: [PATCH] build(html-template): Bundle template at build time

---
 packages/html-templates/.gitignore                 |  1 +
 packages/html-templates/index.js                   |  4 ----
 packages/html-templates/package.json               |  5 +++--
 packages/html-templates/scripts/bundle-template.js | 13 +++++++++++++
 packages/html-templates/webpack.config.common.js   |  4 +++-
 5 files changed, 20 insertions(+), 7 deletions(-)
 delete mode 100644 packages/html-templates/index.js
 create mode 100755 packages/html-templates/scripts/bundle-template.js

diff --git a/packages/html-templates/.gitignore b/packages/html-templates/.gitignore
index 76345546f0..bd4af7af19 100644
--- a/packages/html-templates/.gitignore
+++ b/packages/html-templates/.gitignore
@@ -8,5 +8,6 @@ Thumbs.db
 *.log
 yarn.lock
 dist
+dist-template
 artifacts
 .env
diff --git a/packages/html-templates/index.js b/packages/html-templates/index.js
deleted file mode 100644
index ac4197b2e7..0000000000
--- a/packages/html-templates/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-module.exports = fs.readFileSync(path.join(__dirname, 'dist', 'index.html'), 'utf8');
diff --git a/packages/html-templates/package.json b/packages/html-templates/package.json
index e2ffb88549..1024c45f2e 100644
--- a/packages/html-templates/package.json
+++ b/packages/html-templates/package.json
@@ -2,11 +2,12 @@
   "name": "@bundle-stats/html-templates",
   "version": "4.17.0",
   "description": "HTML templates for report generation.",
-  "main": "index.js",
+  "main": "dist/index.js",
   "types": "types.d.ts",
   "scripts": {
     "prebuild": "rimraf ./dist",
-    "build": "cross-env NODE_ENV=production webpack --config webpack.config.production.js --mode production",
+    "build:template": "cross-env NODE_ENV=production webpack --config webpack.config.production.js --mode production",
+    "build": "npm run build:template && ./scripts/bundle-template.js",
     "lint": "eslint",
     "start": "cross-env NODE_ENV=development storybook dev -c ./build/storybook -p 8090",
     "test": "echo \"No tests\" && exit 0"
diff --git a/packages/html-templates/scripts/bundle-template.js b/packages/html-templates/scripts/bundle-template.js
new file mode 100755
index 0000000000..b2f3843a23
--- /dev/null
+++ b/packages/html-templates/scripts/bundle-template.js
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const ROOT_DIR = path.join(__dirname, '../');
+const OUT_DIR = path.join(ROOT_DIR, 'dist');
+
+const template = fs.readFileSync(path.join(ROOT_DIR, 'dist-template', 'index.html'), 'utf8');
+const output = `module.exports = decodeURI("${encodeURI(template)}");`;
+
+fs.mkdirSync(OUT_DIR, { recursive: true });
+fs.writeFileSync(path.join(OUT_DIR, 'index.js'), output);
diff --git a/packages/html-templates/webpack.config.common.js b/packages/html-templates/webpack.config.common.js
index 7769d03073..fc47c73bc6 100644
--- a/packages/html-templates/webpack.config.common.js
+++ b/packages/html-templates/webpack.config.common.js
@@ -9,12 +9,14 @@ const getResolveConfig = require('./build/webpack/resolve');
 const appConfig = require('./src/config.json');
 const settings = require('./settings');
 
-const { isDevelopment, isProduction, srcDir, distDir } = settings;
+const { isDevelopment, isProduction, srcDir } = settings;
 const iconSprite = fs.readFileSync(
   require.resolve('@bundle-stats/ui/lib-esm/assets/icons.svg'),
   'utf-8',
 );
 
+const distDir = path.join(__dirname, 'dist-template');
+
 module.exports = merge(
   {
     context: srcDir,