Update Mermaid.js to v10.9.3 (#124)

* chore: bump Mermaid.js to v10.9.1

- Updated Mermaid to version 10.9.1
- Rewrote ext.mermaid.js to use ESM
- Removed jQuery + mw.loader.using wrapper
- Used Rollup to create single UMD bundle (mermaid.min.js)
- Switched to packageFiles with bundled output

* update config options to be the same as in Mermaid.js v10.9.1

* chore: bump Mermaid.js to v10.9.3

* docs: update UPDATEMERMAID.md file

* tests (json): add more tests now available from v10.9.3

* prepared 6.0.0

* clean code: remove unnecessary debugger from js

* remove sourcemap references for Mermaid.js v10+

Mermaid.js no longer includes .map files in its distribution since v10.
Removed unused sourcemap references from packageFiles and build config.

Author: gesinn-it-ilm

docs/INSTALL.md

@@ -13,15 +13,15 @@ If you do not have a "composer.local.json" file yet, create one and add the foll
 ```
 {
 	"require": {
-		"mediawiki/mermaid": "~5.0.2"
+		"mediawiki/mermaid": "~6.0.0"
 	}
 }
 ```
 
 If you already have a "composer.local.json" file add the following line to the end of the "require"
 section in your file:
 
-    "mediawiki/mermaid": "~5.0.2"
+    "mediawiki/mermaid": "~6.0.0"
 
 Remember to add a comma to the end of the preceding line in this section.
 

docs/RELEASE-NOTES.md

@@ -1,6 +1,20 @@
 This file contains the *release notes* of the **Mermaid** extension. See also the
 [readme], the [installation and configuration information] and [usage examples].
 
+### 6.0.0
+
+Released July 7, 2025.
+
+* Upgraded Mermaid.js to version 10.9.3.
+* Updated configMap to align with the official Mermaid.js v10.9.3 configuration.
+* Switched from multiple separate script files to a single bundled file using Rollup, improving load performance and simplifying ResourceLoader configuration.
+* Refactored initialization code: Mermaid library and extension-specific logic are now bundled together in mermaid.min.js.
+* Removed the need for explicit script load ordering by using a single packageFiles entry.
+* Dropped usage of global Mermaid variable exposure; now using ES module import internally and UMD bundle output.
+* Simplified extension configuration and improved maintainability by consolidating scripts.
+* Added more JSONScript test cases.
+* Ensured all existing tests pass successfully with the new bundling approach and Mermaid version.
+
 ### 5.0.2
 
 Released July 2, 2025.

docs/UPDATEMERMAID.md

@@ -1,22 +1,35 @@
-## Updating `mermaid` Library
-Mermaid 4.0.0 introduced a new mechanism to update the MermaidJS library shipped with this extension. Starting from this version, the extension switched from using `yarn` to `npm` for managing and updating MermaidJS. This document explains how to perform the update using npm. It is intended for developers only. Users should simply install the extension version tagged with the desired MermaidJS release.
+# Updating `mermaid` Library
 
-### How It Works
-After running `npm install`, the following happens automatically:
+Starting from version 6.0.0, this extension uses a **Rollup-based bundling approach** to include both the `mermaid` library and extension-specific initialization code in a single bundled file (`mermaid.min.js`).
 
-1. **Copying Files**  
-    The `copy-files-from-to` tool copies the minified `mermaid` files from `node_modules` to the `resources/mermaid/` directory:
-    - `mermaid.min.js`
-    - `mermaid.min.js.map`
+This document is intended for **developers only**. Users should simply install a tagged release of the extension that already contains the bundled `mermaid.min.js`.
 
-2. **Injecting Comment**  
-    A custom script (`inject-nomin.js`) prepends the line `/*@nomin*/` to `mermaid.min.js`.  
-    This comment prevents MediaWiki's ResourceLoader from re-minifying the file.
+
+## How It Works
+
+After running `npm install`, the following occurs:
+
+1. **Library Installation**  
+
+   The version of `mermaid` specified in `package.json` is installed into `node_modules`.
+
+2. **Bundling via Rollup `rollup.config.mjs`**  
+
+   This file includes both the `mermaid` library and extension-specific initialization code to find and render Mermaid diagrams on the page using the global mermaid object.
+
+    Rollup is configured to:
+
+    - Bundle both mermaid and the extension code into a single output file (`resources/mermaid.min.js`)
+    - Use the UMD format, so mermaid becomes available globally
+    - Inline all dependencies (inlineDynamicImports: true)
+    - Minify the output with terser
+
+    This approach ensures that ResourceLoader can treat the final file as a single script without requiring multiple scripts or worrying about load order.
 
 ### To Update `mermaid`
 
 1. Open `package.json` and change the version under `"mermaid"`  
-   (e.g., `"mermaid": "latest"` or a specific version like `"8.14.0"`).
+   (e.g., `"mermaid": "latest"` or a specific version like `"10.9.3"`).
 
 2. Run:
 

extension.json

@@ -1,6 +1,6 @@
 {
 	"name": "Mermaid",
-	"version": "5.0.2",
+	"version": "6.0.0",
 	"author": [
 			"James Hong Kong",
 			"Tyler Gibson"
@@ -29,16 +29,15 @@
   	},
 	"ResourceModules": {
 		"ext.mermaid": {
-			"scripts": [
-				"resources/ext.mermaid.js",
+			"packageFiles": [
 				"resources/mermaid.min.js"
 			],
-			"dependencies": [
-				"mediawiki.api"
-			],
 			"styles": [
 				"resources/styles/ext.mermaid.css"
 			],
+			"dependencies": [
+				"mediawiki.api"
+			],
 			"messages": [
 				"mermaid-desc"
 			],
@@ -50,8 +49,9 @@
 	},
 	"ResourceFileModulePaths": {
 		"localBasePath": "",
-		"remoteExtPath": "Mermaid"
+		"remoteExtPath": "Mermaid/resources"
 	},
+
 	"ServiceWiringFiles": [
 		"src/ServiceWiring.php"
 	],

package.json

@@ -1,6 +1,7 @@
 {
+  "type": "module",
   "name": "mediawiki-mermaid",
-  "version": "9.4.3",
+  "version": "10.9.3",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "lib/mermaid.core.js",
   "keywords": [
@@ -13,7 +14,8 @@
     "git graph"
   ],
   "scripts": {
-    "postinstall": "copy-files-from-to && node resources/utility/inject-nomin.js"
+    "build": "rollup -c",
+    "postinstall": "npm run build && node resources/utility/inject-nomin.cjs"
   },
   "repository": {
     "type": "git",
@@ -27,27 +29,21 @@
     ]
   },
   "dependencies": {
-    "mermaid": "9.4.3"
+    "mermaid": "10.9.3"
   },
   "files": [
     "lib",
     "resources"
   ],
-  "copyFiles": [
-    {
-      "from": "node_modules/mermaid/dist/mermaid.min.js",
-      "to": "resources/mermaid.min.js"
-    },
-    {
-      "from": "node_modules/mermaid/dist/mermaid.min.js.map",
-      "to": "resources/mermaid.min.js.map"
-    }
-  ],
   "copyFilesSettings": {
     "whenFileExists": "overwrite"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
     "copy-files-from-to": "^3.12.1",
-    "insert-line": "^1.1.0"
+    "insert-line": "^1.1.0",
+    "rollup": "^4.0.0"
   }
 }

resources/ext.mermaid.js

@@ -6,42 +6,68 @@
  * @author mwjames
  */
 
-/*global jQuery, mediaWiki, smw */
+/*global mediaWiki, mermaid */
 /*jslint white: true */
 
-( function( $, mw ) {
+import mermaid from 'mermaid';
+window.mermaid = mermaid;
 
-	'use strict';
+const generateString = (length) =>
+  Array(length)
+    .fill("")
+    .map(() => Math.random().toString(36).charAt(2))
+    .join("");
 
-	var config = mw.config.get( 'mermaid' );
-	mw.loader.using( [ 'mediawiki.api', 'ext.mermaid' ] ).then( function () {
+function decodeHtmlEntities(str) {
+  const textarea = document.createElement('textarea');
+  textarea.innerHTML = str;
+  return textarea.value;
+}
 
-		$( document ).ready( function() {
-			// Fallback: ensure mermaid is globally available (for newer builds)
-			if ( typeof mermaid === 'undefined' && typeof window.mermaid !== 'undefined' ) {
-				window.mermaid = window.mermaid;
-			} else if ( typeof mermaid === 'undefined' ) {
-				console.error( '[Mermaid] Global "mermaid" object not found.' );
-				return;
-			}
+async function initMermaid() {
+  if (typeof mermaid === 'undefined') {
+    console.error('[Mermaid] Global "mermaid" object not found.');
+    return;
+  }
 
-			$( '.ext-mermaid' ).each( function() {
+  const items = document.querySelectorAll('.ext-mermaid');
+  await Promise.all(Array.from(items).map(async (item, index) => {
+    const id = 'ext-mermaid-' + generateString(8) + '-' + index;
 
-				var that = $( this );
-				var id = 'ext-mermaid-' + ( new Date().getTime() );
-				var data = that.data( 'mermaid' );
+    let data;
+    try {
+      data = typeof item.dataset.mermaid === 'string'
+        ? JSON.parse(item.dataset.mermaid)
+        : {};
+    } catch (e) {
+      console.error('[Mermaid] Failed to parse data-mermaid:', e);
+      return;
+    }
 
-				that.find( '.mermaid-dots' ).hide();
-				that.append( '<div id="' + id + '"> ' + data.content + ' </div>' );
+    if (!data.content || typeof data.content !== 'string') {
+      console.error('[Mermaid] No diagram content provided.');
+      return;
+    }
 
-				try {
-					mermaid.initialize( data.config || {} );
-					mermaid.init( undefined, $( "#" + id )[0] );
-				} catch (e) {
-					console.error( '[Mermaid] Failed to render diagram:', e );
-				}
-			} );
-		} );
-	} );
+    // Hide loading animation (dots)
+    const dots = item.children[0];
+    if (dots) dots.style.display = 'none';
 
-}( jQuery, mediaWiki ) );
+    try {
+      mermaid.initialize({
+		securityLevel: 'loose',
+		...data.config
+	  });
+      const { svg, bindFunctions } = await mermaid.render(id + '-svg', decodeHtmlEntities(data.content));
+      const graph = document.createElement('div');
+      graph.id = id;
+      graph.innerHTML = svg;
+      item.appendChild(graph);
+      bindFunctions?.(graph);
+    } catch (e) {
+      console.error(`[Mermaid] Failed to render diagram with id=${id}:`, e);
+    }
+  }));
+}
+
+initMermaid();

resources/mermaid.min.js

@@ -0,0 +1,10 @@
+const fs = require('fs');
+const path = require('path');
+
+const targetFile = path.resolve(__dirname, '../../resources/mermaid.min.js');
+const comment = '/*@nomin*/\n';
+
+const content = fs.readFileSync(targetFile, 'utf8');
+fs.writeFileSync(targetFile, comment + content, 'utf8');
+
+console.log('Prepended /*@nomin*/ to mermaid.min.js');