refactor: use vite to bundle index.html code

Uses `vite` to bundle the `index.html` code. This has a few benefits: - we can remove our custom `copy_modules.sh` script - our `dist/` folder can be smaller and better optimized - we now support using ESM modules in the client (puppeteer didn't like these before) This is needed since mermaid-mindmap is ESM only.
mermaid-js · Nov 16, 2022 · 9e168fb · 9e168fb
1 parent bfe3823
commit 9e168fb
Show file tree

Hide file tree

Showing 7 changed files with 432 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,13 +1,15 @@
 node_modules/
 *.svg
 *.png
-*.min.js
-*.bundle.js
 *.pdf
-fontawesome/
+/dist
 .DS_Store
 .npmrc
 yarn-error.log
 test-positive/*.out.md
 test-output/
 
+# these are no longer used, but may still be in people's git folders
+fontawesome/
+*.min.js
+*.bundle.js
diff --git a/copy_modules.sh b/copy_modules.sh
diff --git a/index.html b/index.html
@@ -1,13 +1,17 @@
 <!doctype html>
 <html>
-  <head>
-    <link rel="stylesheet" href="./fontawesome/css/fa-brands.css">
-    <link rel="stylesheet" href="./fontawesome/css/fa-regular.css">
-    <link rel="stylesheet" href="./fontawesome/css/fa-solid.css">
-    <link rel="stylesheet" href="./fontawesome/css/fontawesome.css">
-  </head>
   <body>
     <div id="container"></div>
-    <script src="./mermaid.min.js" charset="utf-8"></script>
+    <script type="module">
+      import faBrands from "@fortawesome/fontawesome-free-webfonts/css/fa-brands.css"
+      import faRegular from "@fortawesome/fontawesome-free-webfonts/css/fa-regular.css"
+      import faSolid from "@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
+      import fontawesome from "@fortawesome/fontawesome-free-webfonts/css/fontawesome.css"
+
+      import mermaid from "mermaid"
+
+      // expose mermaid to the global scope so that puppeteer can see it
+      globalThis.mermaid = mermaid
+    </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -14,9 +14,8 @@
   },
   "exports": "./src/index.js",
   "scripts": {
-    "upgrade": "yarn-upgrade-all && sh copy_modules.sh",
-    "prepare": "sh copy_modules.sh",
-    "prepack": "sh copy_modules.sh",
+    "prepare": "vite build",
+    "prepack": "vite build",
     "test": "standard && yarn node --experimental-vm-modules $(yarn bin jest)",
     "lint": "standard",
     "lint-fix": "standard --fix"
@@ -31,13 +30,14 @@
     "mermaid": "^9.2.2",
     "jest": "^29.0.1",
     "standard": "^17.0.0",
+    "vite": "^3.2.3",
+    "vite-plugin-singlefile": "^0.13.1",
+    "vite-svg-loader": "^3.6.0",
     "yarn-upgrade-all": "^0.7.0"
   },
   "files": [
     "src/",
-    "mermaid.min.js",
-    "index.html",
-    "fontawesome/*"
+    "dist/"
   ],
   "jest": {
     "moduleNameMapper": {
@@ -46,7 +46,7 @@
   },
   "standard": {
     "ignore": [
-      "mermaid.min.js"
+      "/dist/"
     ]
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -196,7 +196,7 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
     if (viewport) {
       await page.setViewport(viewport)
     }
-    const mermaidHTMLPath = path.join(__dirname, '..', 'index.html')
+    const mermaidHTMLPath = path.join(__dirname, '..', 'dist', 'index.html')
     await page.goto(url.pathToFileURL(mermaidHTMLPath))
     await page.$eval('body', (body, backgroundColor) => {
       body.style.background = backgroundColor

diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from "vite"
+import { viteSingleFile } from "vite-plugin-singlefile"
+import svgLoader from 'vite-svg-loader'
+
+export default defineConfig({
+  plugins: [
+    // bundle everything into a single `index.html`
+    viteSingleFile(),
+    // unsure if this is working properly for fontawesome fonts
+    svgLoader(),
+  ],
+})