perf: 🚀 minify dynamic html tags (close #250) (#311)

#250

Creates a new `minifyHTMLLiteralsPlugin` for rollup to handle
dynamic tags effectively, reducing warnings and increasing compression
efficiency during bundling.

Currently this only affects the button, but might affect other elements
in future, too.

packages/components/package.json

@@ -111,13 +111,13 @@
     "jsonata": "^2.0.3",
     "lint-staged": "^13.2.2",
     "lit-html": "^2.7.4",
+    "minify-html-literals": "^1.3.5",
     "normalize.css": "^8.0.1",
     "plop": "^3.1.2",
     "postcss": "^8.4.24",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-summary": "^2.0.0",
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "^7.0.5",

packages/components/scripts/rollup-plugin-minify-html-literals.ts

@@ -0,0 +1,50 @@
+/**
+ * The `minifyHTMLLiteralsPlugin` function creates a Rollup plugin that minifies
+ * HTML literals in your source code during the Rollup bundling process.
+ *
+ * This plugin:
+ * 1. Iterates through each module in the input bundle.
+ * 2. Prepares the module code for minification by replacing certain dynamic tags
+ *    that would otherwise confuse the minification process.
+ * 3. Minifies the HTML literals in the prepared code using the minify-html-literals library.
+ * 4. If minification was successful, it reverses the replacements made during preparation
+ *    to restore the original dynamic tags, and the minified code replaces the original code.
+ * 5. If minification failed, it leaves the original code untouched.
+ */
+
+import { minifyHTMLLiterals } from 'minify-html-literals';
+
+export default function minifyHTMLLiteralsPlugin() {
+  return {
+    name: 'minify-html-literals',
+    transform(code: string, id: string) {
+      // This function prepares code by replacing certain dynamic tags.
+      // If reverse is true, the function will reverse the replacements.
+      const prepareCode = (codeToModify: string, reverse = false) => {
+        // eslint-disable-next-line no-template-curly-in-string
+        const dynamicTags = [{ from: '${tag}', to: 'tag-to-be-replaced' }];
+
+        // Replace all occurrences of each dynamic tag and return the modified code.
+        dynamicTags.forEach(dynamicTag => {
+          const from = reverse ? dynamicTag.to : dynamicTag.from;
+          const to = reverse ? dynamicTag.from : dynamicTag.to;
+
+          codeToModify = codeToModify.replaceAll(`<${from}`, `<${to}`);
+          codeToModify = codeToModify.replaceAll(`</${from}`, `</${to}`);
+        });
+
+        return codeToModify; // return the modified code
+      };
+
+      // Prepare the code for minification by replacing certain dynamic tags.
+      const preparedCode = prepareCode(code, false);
+
+      // Minify the HTML literals in the prepared code.
+      const minified = minifyHTMLLiterals(preparedCode, { fileName: id });
+
+      // If minification was successful, prepare the minified code by reversing the replacements
+      // made earlier. If minification failed (i.e., minified is null), return the original code.
+      return minified ? prepareCode(minified.code, true) : code; // Check if minified is null or not
+    }
+  };
+}

packages/components/tsconfig.json

@@ -4,7 +4,7 @@
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
     "target": "esnext",
     "module": "esnext",
-    "lib": ["dom", "dom.Iterable", "es2020"],
+    "lib": ["dom", "dom.Iterable", "es2021"],
     "declaration": true,
     "rootDir": ".",
     "strict": true,

packages/components/vite.config.package.ts

@@ -1,13 +1,10 @@
 import addTypesPlugin from './scripts/rollup-plugin-add-types';
-import minifyHtmlPlugin from 'rollup-plugin-minify-html-literals';
+import customMinifyHTMLLiteralsPlugin from './scripts/rollup-plugin-minify-html-literals';
 import path from 'path';
 import resolve from '@rollup/plugin-node-resolve';
 import summaryPlugin from 'rollup-plugin-summary';
 import type { defineConfig } from 'vite';
 
-// eslint-disable-next-line
-const minifyHTML = (minifyHtmlPlugin as any).default;
-
 // https://vitejs.dev/config/
 export default (() => {
   return {
@@ -44,7 +41,7 @@ export default (() => {
           }),
           // Minify HTML template literals
           // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-          minifyHTML(),
+          customMinifyHTMLLiteralsPlugin(),
           // Print bundle summary
           summaryPlugin(),
           // add types to package

packages/components/vite.config.ts

@@ -1,6 +1,6 @@
 import customElementConfig from './custom-elements-manifest.config';
+import customMinifyHTMLLiteralsPlugin from './scripts/rollup-plugin-minify-html-literals';
 import customMinifyPlugin from './scripts/rollup-plugin-custom-minify';
-import minifyHtmlPlugin from 'rollup-plugin-minify-html-literals';
 import path from 'path';
 import resolve from '@rollup/plugin-node-resolve';
 import summaryPlugin from 'rollup-plugin-summary';
@@ -10,9 +10,6 @@ import VitePluginGetPlaywrightVersion from './scripts/vite-plugin-get-playwright
 import webTypesPlugin from './scripts/rollup-plugin-web-types';
 import type { defineConfig } from 'vite';
 
-// eslint-disable-next-line
-const minifyHTML = (minifyHtmlPlugin as any).default;
-
 // https://vitejs.dev/config/
 export default (({ command }: { command: string }) => {
   return {
@@ -56,7 +53,7 @@ export default (({ command }: { command: string }) => {
           resolve(),
           // Minify HTML template literals
           // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-          minifyHTML(),
+          customMinifyHTMLLiteralsPlugin(),
           // Minify ES and UMD bundles
           customMinifyPlugin({
             ecma: 2020,