astro-mermaid 1.1.0 → 1.3.0

package/README.md

@@ -218,7 +218,7 @@ All mermaid diagram types are supported:
 
 ## Version
 
-**Current:** `v1.0.4` - Enhanced universal compatibility with dual plugin system
+**Current:** `v1.2.0` - Enhanced universal compatibility with dual plugin system
 
 See [changelog](https://github.com/joesaby/astro-mermaid/releases) for version history.
 

package/astro-mermaid-integration.js

@@ -1,5 +1,20 @@
 import { resolve } from 'import-meta-resolve';
 
+/**
+ * Helper function to HTML-escape text content
+ * This ensures HTML tags in mermaid diagrams are preserved as text
+ */
+function escapeHtml(text) {
+  const htmlEntities = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  };
+  return text.replace(/[&<>"']/g, char => htmlEntities[char]);
+}
+
 /**
  * Remark plugin to transform mermaid code blocks at the markdown level
  */
@@ -13,10 +28,10 @@ function remarkMermaidPlugin(options = {}) {
       if (node.lang === 'mermaid') {
         mermaidCount++;
 
-        // Transform to html node with pre.mermaid
+        // Transform to html node with pre.mermaid, escaping HTML content
         const htmlNode = {
           type: 'html',
-          value: `<pre class="mermaid">${node.value}</pre>`
+          value: `<pre class="mermaid">${escapeHtml(node.value)}</pre>`
         };
 
         // Replace the code node with html node
@@ -36,6 +51,49 @@ function remarkMermaidPlugin(options = {}) {
   };
 }
 
+/**
+ * Helper function to serialize HAST nodes back to HTML text
+ * This preserves HTML tags within the mermaid content
+ */
+function serializeHastChildren(children) {
+  let result = '';
+
+  for (const child of children) {
+    if (child.type === 'text') {
+      result += child.value;
+    } else if (child.type === 'element') {
+      // Reconstruct the HTML tag
+      const tagName = child.tagName;
+      const selfClosing = ['br', 'hr', 'img', 'input', 'meta', 'link'].includes(tagName);
+
+      result += `<${tagName}`;
+
+      // Add attributes if any
+      if (child.properties) {
+        for (const [key, value] of Object.entries(child.properties)) {
+          if (key !== 'className') {
+            result += ` ${key}="${value}"`;
+          } else if (Array.isArray(value)) {
+            result += ` class="${value.join(' ')}"`;
+          }
+        }
+      }
+
+      if (selfClosing) {
+        result += '/>';
+      } else {
+        result += '>';
+        if (child.children && child.children.length > 0) {
+          result += serializeHastChildren(child.children);
+        }
+        result += `</${tagName}>`;
+      }
+    }
+  }
+
+  return result;
+}
+
 /**
  * Rehype plugin to transform mermaid code blocks
  * Converts ```mermaid code blocks to <pre class="mermaid">
@@ -43,7 +101,6 @@ function remarkMermaidPlugin(options = {}) {
 function rehypeMermaidPlugin(options = {}) {
   return async function transformer(tree, file) {
     const { visit } = await import('unist-util-visit');
-    const { toString } = await import('mdast-util-to-string');
 
     let mermaidCount = 0;
 
@@ -59,8 +116,8 @@ function rehypeMermaidPlugin(options = {}) {
 
         if (Array.isArray(className) && className.includes('language-mermaid')) {
           mermaidCount++;
-          // Get the mermaid diagram content
-          const diagramContent = toString(codeNode);
+          // Get the mermaid diagram content, preserving HTML tags
+          const diagramContent = serializeHastChildren(codeNode.children || []);
 
           // Transform to <pre class="mermaid">
           node.properties = {
@@ -68,9 +125,10 @@ function rehypeMermaidPlugin(options = {}) {
             className: ['mermaid']
           };
 
+          // Escape HTML to preserve it as text content
           node.children = [{
             type: 'text',
-            value: diagramContent
+            value: escapeHtml(diagramContent)
           }];
 
           if (options.logger) {
@@ -166,12 +224,16 @@ const hasMermaidDiagrams = () => {
   return document.querySelectorAll('pre.mermaid').length > 0;
 };
 
-// Only proceed if there are mermaid diagrams on the page
-if (hasMermaidDiagrams()) {
-  console.log('[astro-mermaid] Mermaid diagrams detected, loading mermaid.js...');
-  
-  // Dynamically import mermaid only when needed
-  import('mermaid').then(async ({ default: mermaid }) => {
+// Shared mermaid initialization function
+let mermaidPromise = null;
+let mermaidInstance = null;
+
+async function loadMermaid() {
+  if (mermaidPromise) return mermaidPromise;
+
+  console.log('[astro-mermaid] Loading mermaid.js...');
+
+  mermaidPromise = import('mermaid').then(async ({ default: mermaid }) => {
     // Register icon packs if provided
     const iconPacks = ${JSON.stringify(iconPacksConfig)};
     if (iconPacks && iconPacks.length > 0) {
@@ -192,132 +254,147 @@ if (elkModule?.default) {
 }
 ` : ``}
 
-    // Mermaid configuration
-    const defaultConfig = ${JSON.stringify({
-      startOnLoad: false,
-      theme: theme,
-      ...mermaidConfig
-    })};
-
-    // Theme mapping for auto-theme switching
-    const themeMap = {
-      'light': 'default',
-      'dark': 'dark'
-    };
-
-    // Initialize all mermaid diagrams
-    async function initMermaid() {
-      console.log('[astro-mermaid] Initializing mermaid diagrams...');
-      const diagrams = document.querySelectorAll('pre.mermaid');
-      
-      console.log('[astro-mermaid] Found', diagrams.length, 'mermaid diagrams');
-      
-      if (diagrams.length === 0) {
-        return;
-      }
-      
-      // Get current theme from multiple sources
-      let currentTheme = defaultConfig.theme;
-      
-      if (${autoTheme}) {
-        // Check both html and body for data-theme attribute
-        const htmlTheme = document.documentElement.getAttribute('data-theme');
-        const bodyTheme = document.body.getAttribute('data-theme');
-        const dataTheme = htmlTheme || bodyTheme;
-        currentTheme = themeMap[dataTheme] || defaultConfig.theme;
-        console.log('[astro-mermaid] Using theme:', currentTheme, 'from', htmlTheme ? 'html' : 'body');
-      }
-      
-      // Configure mermaid with gitGraph support
-      mermaid.initialize({
-        ...defaultConfig,
-        theme: currentTheme,
-        gitGraph: {
-          mainBranchName: 'main',
-          showCommitLabel: true,
-          showBranches: true,
-          rotateCommitLabel: true
-        }
-      });
-      
-      // Render each diagram
-      for (const diagram of diagrams) {
-        // Skip if already processed
-        if (diagram.hasAttribute('data-processed')) continue;
-        
-        // Store original content
-        if (!diagram.hasAttribute('data-diagram')) {
-          diagram.setAttribute('data-diagram', diagram.textContent || '');
-        }
-        
-        const diagramDefinition = diagram.getAttribute('data-diagram') || '';
-        const id = 'mermaid-' + Math.random().toString(36).slice(2, 11);
-        
-        console.log('[astro-mermaid] Rendering diagram:', id);
-        
-        try {
-          // Clear any existing error state
-          const existingGraph = document.getElementById(id);
-          if (existingGraph) {
-            existingGraph.remove();
-          }
-          
-          const { svg } = await mermaid.render(id, diagramDefinition);
-          diagram.innerHTML = svg;
-          diagram.setAttribute('data-processed', 'true');
-          console.log('[astro-mermaid] Successfully rendered diagram:', id);
-        } catch (error) {
-          console.error('[astro-mermaid] Mermaid rendering error for diagram:', id, error);
-          diagram.innerHTML = \`<div style="color: red; padding: 1rem; border: 1px solid red; border-radius: 0.5rem;">
-            <strong>Error rendering diagram:</strong><br/>
-            \${error.message || 'Unknown error'}
-          </div>\`;
-          diagram.setAttribute('data-processed', 'true');
-        }
-      }
+    mermaidInstance = mermaid;
+    return mermaid;
+  }).catch(error => {
+    console.error('[astro-mermaid] Failed to load mermaid:', error);
+    mermaidPromise = null;
+    throw error;
+  });
+
+  return mermaidPromise;
+}
+
+// Mermaid configuration
+const defaultConfig = ${JSON.stringify({
+  startOnLoad: false,
+  theme: theme,
+  ...mermaidConfig
+})};
+
+// Theme mapping for auto-theme switching
+const themeMap = {
+  'light': 'default',
+  'dark': 'dark'
+};
+
+// Initialize all mermaid diagrams
+async function initMermaid() {
+  console.log('[astro-mermaid] Initializing mermaid diagrams...');
+  const diagrams = document.querySelectorAll('pre.mermaid');
+
+  console.log('[astro-mermaid] Found', diagrams.length, 'mermaid diagrams');
+
+  if (diagrams.length === 0) {
+    return;
+  }
+
+  // Load mermaid if not already loaded
+  const mermaid = await loadMermaid();
+
+  // Get current theme from multiple sources
+  let currentTheme = defaultConfig.theme;
+
+  if (${autoTheme}) {
+    // Check both html and body for data-theme attribute
+    const htmlTheme = document.documentElement.getAttribute('data-theme');
+    const bodyTheme = document.body.getAttribute('data-theme');
+    const dataTheme = htmlTheme || bodyTheme;
+    currentTheme = themeMap[dataTheme] || defaultConfig.theme;
+    console.log('[astro-mermaid] Using theme:', currentTheme, 'from', htmlTheme ? 'html' : 'body');
+  }
+
+  // Configure mermaid with gitGraph support
+  mermaid.initialize({
+    ...defaultConfig,
+    theme: currentTheme,
+    gitGraph: {
+      mainBranchName: 'main',
+      showCommitLabel: true,
+      showBranches: true,
+      rotateCommitLabel: true
     }
+  });
 
-    // Initialize immediately since DOM is ready
-    initMermaid();
+  // Render each diagram
+  for (const diagram of diagrams) {
+    // Skip if already processed
+    if (diagram.hasAttribute('data-processed')) continue;
 
-    // Re-render on theme change if auto-theme is enabled
-    if (${autoTheme}) {
-      const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
-            // Reset processed state and re-render
-            document.querySelectorAll('pre.mermaid[data-processed]').forEach(diagram => {
-              diagram.removeAttribute('data-processed');
-            });
-            initMermaid();
-          }
-        }
-      });
-      
-      // Observe both html and body for data-theme changes
-      observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['data-theme']
-      });
-      observer.observe(document.body, {
-        attributes: true,
-        attributeFilter: ['data-theme']
-      });
+    // Store original content
+    if (!diagram.hasAttribute('data-diagram')) {
+      diagram.setAttribute('data-diagram', diagram.textContent || '');
     }
 
-    // Handle view transitions (for Astro View Transitions API)
-    document.addEventListener('astro:after-swap', () => {
-      // Check again if new page has diagrams
-      if (hasMermaidDiagrams()) {
+    const diagramDefinition = diagram.getAttribute('data-diagram') || '';
+    const id = 'mermaid-' + Math.random().toString(36).slice(2, 11);
+
+    console.log('[astro-mermaid] Rendering diagram:', id);
+
+    try {
+      // Clear any existing error state
+      const existingGraph = document.getElementById(id);
+      if (existingGraph) {
+        existingGraph.remove();
+      }
+
+      const { svg } = await mermaid.render(id, diagramDefinition);
+      diagram.innerHTML = svg;
+      diagram.setAttribute('data-processed', 'true');
+      console.log('[astro-mermaid] Successfully rendered diagram:', id);
+    } catch (error) {
+      console.error('[astro-mermaid] Mermaid rendering error for diagram:', id, error);
+      diagram.innerHTML = \`<div style="color: red; padding: 1rem; border: 1px solid red; border-radius: 0.5rem;">
+        <strong>Error rendering diagram:</strong><br/>
+        \${error.message || 'Unknown error'}
+      </div>\`;
+      diagram.setAttribute('data-processed', 'true');
+    }
+  }
+}
+
+// Initialize on first load if there are diagrams
+if (hasMermaidDiagrams()) {
+  console.log('[astro-mermaid] Mermaid diagrams detected on initial load');
+  initMermaid();
+} else {
+  console.log('[astro-mermaid] No mermaid diagrams found on initial load');
+}
+
+// Re-render on theme change if auto-theme is enabled
+if (${autoTheme}) {
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+        // Reset processed state and re-render
+        document.querySelectorAll('pre.mermaid[data-processed]').forEach(diagram => {
+          diagram.removeAttribute('data-processed');
+        });
         initMermaid();
       }
-    });
-  }).catch(error => {
-    console.error('[astro-mermaid] Failed to load mermaid:', error);
+    }
+  });
+
+  // Observe both html and body for data-theme changes
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme']
+  });
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ['data-theme']
   });
-} else {
-  console.log('[astro-mermaid] No mermaid diagrams found on this page, skipping mermaid.js load');
 }
+
+// Handle view transitions (for Astro View Transitions API)
+// This is registered ALWAYS, not just when initial page has diagrams
+document.addEventListener('astro:after-swap', () => {
+  console.log('[astro-mermaid] View transition detected');
+  // Check if new page has diagrams
+  if (hasMermaidDiagrams()) {
+    initMermaid();
+  }
+});
 `;
 
         injectScript('page', mermaidScriptContent);
@@ -407,4 +484,4 @@ if (elkModule?.default) {
       }
     }
   };
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-mermaid",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "An Astro integration for rendering Mermaid diagrams with automatic theme switching and client-side rendering",
   "type": "module",
   "main": "./astro-mermaid-integration.js",
@@ -43,11 +43,26 @@
     "mdast-util-to-string": "^4.0.0",
     "unist-util-visit": "^5.0.0"
   },
+  "scripts": {
+    "claude": "claude",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
+  },
   "devDependencies": {
+    "@anthropic-ai/claude-code": "^2.0.71",
     "@types/hast": "^3.0.4",
+    "@vitest/ui": "^3.2.4",
     "astro": "^5.0.0",
+    "hast-util-from-html": "^2.0.3",
     "mermaid": "^11.0.0",
-    "typescript": "^5.0.0"
+    "rehype-parse": "^9.0.1",
+    "rehype-stringify": "^10.0.1",
+    "remark-mermaid": "^0.2.0",
+    "remark-parse": "^11.0.0",
+    "typescript": "^5.0.0",
+    "unified": "^11.0.5",
+    "vitest": "^3.2.4"
   },
   "repository": {
     "type": "git",
@@ -57,4 +72,4 @@
   "bugs": {
     "url": "https://github.com/joesaby/astro-mermaid/issues"
   }
-}
+}