Update src/hacking/contributing-to-servo-book.md

mermaid-init.js is a custom version written for Servo. My previous auto update change must be reverted

Co-authored-by: delan azabani <delan@azabani.com>
Signed-off-by: Dmitrii Desiatkin <47791504+d-desiatkin@users.noreply.github.com>

Author: 2 people

src/hacking/contributing-to-servo-book.md

@@ -32,7 +32,7 @@ Servo book uses [Mermaid Diagramming and charting tool](https://mermaid.js.org/)
 You can find the example of such diagram in section [Architecture overview](architecture/overview.md). Sometimes you will want to use the newest syntax, and that tool is not automatically updated, so you may use the following steps to update the version within the project:
 ```bash
 mdbook-mermaid install .
-mv mermaid-init.js src/mermaid-init.js
+rm mermaid-init.js
 mv mermaid.min.js src/mermaid.min.js
 ```
 

src/mermaid-init.js

@@ -1,35 +1,31 @@
+// NOTE: this is a custom version of mermaid-init.js written for the Servo book!
+// When updating mermaid, do not overwrite this file with the mdbook-mermaid version.
 (() => {
-    const darkThemes = ['ayu', 'navy', 'coal'];
-    const lightThemes = ['light', 'rust'];
+    // When the mdBook theme changes, rerender diagrams with a suitable Mermaid theme.
+    const mermaids = [...document.querySelectorAll(".mermaid")];
+    const texts = mermaids.map(x => x.textContent);
+    const observer = new MutationObserver((mutations, observer) => {
+        reinitMermaid();
+    });
+    observer.observe(document.documentElement, {
+        attributeFilter: ["class"],
+    });
+    reinitMermaid();
 
-    const classList = document.getElementsByTagName('html')[0].classList;
-
-    let lastThemeWasLight = true;
-    for (const cssClass of classList) {
-        if (darkThemes.includes(cssClass)) {
-            lastThemeWasLight = false;
-            break;
+    function reinitMermaid() {
+        // Restore the original state of each diagram.
+        for (const [i, pre] of mermaids.entries()) {
+            delete pre.dataset.processed;
+            pre.textContent = texts[i];
         }
-    }
-
-    const theme = lastThemeWasLight ? 'default' : 'dark';
-    mermaid.initialize({ startOnLoad: true, theme });
-
-    // Simplest way to make mermaid re-render the diagrams in the new theme is via refreshing the page
-
-    for (const darkTheme of darkThemes) {
-        document.getElementById(darkTheme).addEventListener('click', () => {
-            if (lastThemeWasLight) {
-                window.location.reload();
-            }
-        });
-    }
-
-    for (const lightTheme of lightThemes) {
-        document.getElementById(lightTheme).addEventListener('click', () => {
-            if (!lastThemeWasLight) {
-                window.location.reload();
-            }
+        // Select a theme based on the mdBook theme, then rerender the diagrams.
+        const rootClasses = document.documentElement.classList;
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: rootClasses.contains("light") || rootClasses.contains("rust") ? "default"
+                : rootClasses.contains("coal") || rootClasses.contains("navy") || rootClasses.contains("ayu") ? "dark"
+                : "default",
         });
+        mermaid.run();
     }
-})();
+})();