From 5cda4f785959ddba821b45c0ebb2a9651cea99a2 Mon Sep 17 00:00:00 2001
From: Lapo Luchini <lapo@lapo.it>
Date: Mon, 29 Apr 2024 10:21:11 +0000
Subject: [PATCH] Since ESM is not useable on `file:` protocol, use Vite to
 generate a single-file `index-local.html`.

---
 .gitignore     |  1 +
 .mtn-ignore    |  1 +
 index.html     |  4 ++--
 index.js       | 14 ++++++++++----
 package.json   | 11 ++++++++++-
 release.sh     |  6 ++++--
 vite.config.js | 43 +++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 71 insertions(+), 9 deletions(-)
 create mode 100644 vite.config.js
diff --git a/.gitignore b/.gitignore
index f7aad76..23753bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ node_modules/
 package-lock.json
 pnpm-lock.yaml
 # Artifacts from release.sh
+index-local.html
 sha256sums.asc
 asn1js.zip
 # Artifacts from mirror_to_github.sh
diff --git a/.mtn-ignore b/.mtn-ignore
index 97ac908..7700e1e 100644
--- a/.mtn-ignore
+++ b/.mtn-ignore
@@ -4,6 +4,7 @@ node_modules$
 package-lock[.]json
 pnpm-lock[.]yaml
 # Artifacts from release.sh
+index-local.html
 sha256sums[.]asc
 asn1js[.]zip
 # Artifacts from mirror_to_github.sh
diff --git a/index.html b/index.html
index be537e4..c06267b 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="US-ASCII">
+  <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>ASN.1 JavaScript decoder</title>
   <link rel="stylesheet" href="index.css" type="text/css" id="theme-base">
@@ -46,7 +46,7 @@ <h1>ASN.1 JavaScript decoder</h1>
       <br><br>
       <table>
         <tr><td>Drag or load file:</td><td><input type="file" id="file"></td></tr>
-        <tr><td>Load examples:</td><td>
+        <tr id="rowExamples"><td>Load examples:</td><td>
           <select id="examples">
             <option value="sig-p256-der.p7m">PKCS#7/CMS attached signature (DER)</option>
             <option value="sig-p256-ber.p7m">PKCS#7/CMS attached signature (BER)</option>
diff --git a/index.js b/index.js
index 2409180..7f42f15 100644
--- a/index.js
+++ b/index.js
@@ -160,6 +160,10 @@ for (const [name, onClick] of Object.entries(butClickHandlers)) {
 }
 // set dark theme depending on OS settings
 function setTheme() {
+    if (!selectTheme) {
+        console.log('Themes are currently not working with single file version.');
+        return;
+    }
     let storedTheme = localStorage.getItem('theme');
     let theme = 'os';
     if (storedTheme)
@@ -181,10 +185,12 @@ function setTheme() {
     }
 }
 setTheme();
-selectTheme.addEventListener('change', function () {
-    localStorage.setItem('theme', selectTheme.value);
-    setTheme();
-});
+if (selectTheme) {
+    selectTheme.addEventListener('change', function () {
+        localStorage.setItem('theme', selectTheme.value);
+        setTheme();
+    });
+}
 // this is only used if window.FileReader
 function read(f) {
     area.value = ''; // clear text area, will get b64 content
diff --git a/package.json b/package.json
index 193764e..c414ea8 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "scripts": {
     "lint": "npx eslint asn1.js base64.js hex.js int10.js oids.js tags.js context.js index.js parseRFC.js dumpASN1.js test.js testDefs.js",
     "lint-action": "npx @action-validator/cli .github/workflows/node.js.yml",
+    "build": "vite build",
     "serve": "echo 'Connect to http://localhost:3000/' ; npx statik --port 3000 .",
     "test": "node test",
     "testdefs": "node testDefs"
@@ -25,7 +26,15 @@
     "node": ">=12.20.0"
   },
   "devDependencies": {
-    "eslint": "^8.34.0"
+    "@rollup/wasm-node": "^4.17.1",
+    "eslint": "^8.34.0",
+    "htmlparser2": "^9.1.0",
+    "vite": "^5.2.10",
+    "vite-plugin-dom": "^1.0.3",
+    "vite-plugin-singlefile": "^2.0.1"
+  },
+  "overrides": {
+    "rollup": "npm:@rollup/wasm-node"
   },
   "eslintConfig": {
     "env": {
diff --git a/release.sh b/release.sh
index 0f0b7f3..c92c359 100755
--- a/release.sh
+++ b/release.sh
@@ -2,10 +2,10 @@
 set -e
 FILES="
   asn1.js oids.js defs.js base64.js hex.js int10.js dom.js rfcdef.js test.js tags.js
-  context.js index.css index-dark.css index.js index.html favicon.svg
+  context.js index.css index-dark.css index.js index.html favicon.svg index-local.html
   README.md LICENSE
   updateOID.sh check.sh
-  examples
+  examples/*
 "
 mtn automate tags 'it.lapo.asn1js{,.*}' | \
   awk '/^revision/ { print substr($2, 2, length($2) - 2)}' | \
@@ -26,6 +26,8 @@ mtn automate tags 'it.lapo.asn1js{,.*}' | \
   ' > tags.js
 chmod 644 examples/*
 type gsha256sum >/dev/null 2>/dev/null && SHA256=gsha256sum || SHA256=sha256sum
+pnpm build
+cp dist/index.html index-local.html
 $SHA256 -t $FILES | gpg --clearsign > sha256sums.asc
 7z a -tzip -mx=9 asn1js.zip $FILES sha256sums.asc
 rsync -Pvrtz asn1js.zip $FILES lapo.it:www/asn1js/
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..3644f78
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,43 @@
+import { defineConfig } from 'vite';
+import { viteSingleFile } from 'vite-plugin-singlefile';
+import pluginDom from 'vite-plugin-dom';
+import { DomUtils } from 'htmlparser2';
+
+const preventSVGEmit = () => {
+  return {
+    generateBundle(opts, bundle) {
+      for (const key in bundle)
+        if (key.endsWith('.svg'))
+          delete bundle[key];
+    },
+  }
+}
+
+const removeNodes = [ 'theme-select', 'rowExamples' ];
+
+export default defineConfig({
+  plugins: [
+    preventSVGEmit(),
+    pluginDom({
+      applyOnMode: true, // all modes
+      handler: node => {
+        if (removeNodes.includes(node.attribs.id))
+          DomUtils.removeElement(node);
+      },
+    }),
+    viteSingleFile(),
+  ],
+  build: {
+    minify: false,
+    cssMinify: false,
+    rollupOptions: {
+      output: {
+       assetFileNames: function (file) {
+        return file.name == 'favicon.svg'
+          ? file.name
+          : `assets/[name]-[hash].[ext]`;
+        },
+      }
+    },
+  },
+});
