astro-mermaid 2.0.3 → 2.1.0

package/README.md

@@ -75,6 +75,22 @@ npm install @mermaid-js/layout-elk
 
 Learn more about [Mermaid layouts](https://mermaid.js.org/config/layouts.html) or [The Eclipse Layout Kernel](https://eclipse.dev/elk/).
 
+## Astro Compatibility
+
+`astro-mermaid` works across Astro 4, 5, 6, and 7 — no configuration needed. It
+detects the active markdown engine at build time and registers its transform the
+right way for each:
+
+| Astro version | Markdown engine | How mermaid hooks in |
+|---------------|-----------------|----------------------|
+| 7+ | Sätteri (`@astrojs/markdown-satteri`, the new default) | a Sätteri **mdast plugin** |
+| 6.4 – 6.x | `unified()` processor | remark + rehype plugins via `markdown.processor` |
+| < 6.4 | legacy pipeline | `markdown.remarkPlugins` / `markdown.rehypePlugins` |
+
+If you previously pinned `markdown.processor` to `unified()` purely to keep
+mermaid working on Astro 7, you can now drop that workaround and let Astro use
+its default Sätteri processor.
+
 ## Integration Order (Important!)
 
 When using with Starlight or other markdown-processing integrations, place mermaid **first**:

package/astro-mermaid-integration.js

@@ -81,6 +81,40 @@ function remarkMermaidPlugin(options = {}) {
   };
 }
 
+/**
+ * Sätteri mdast plugin to transform mermaid code blocks at the markdown level.
+ *
+ * Astro 7 ships `@astrojs/markdown-satteri` as the default markdown processor,
+ * which has its own mdast/hast plugin model instead of remark/rehype. This is
+ * the Sätteri equivalent of `remarkMermaidPlugin`: it visits `code` nodes and
+ * replaces mermaid blocks with a `<pre class="mermaid">` HTML node. Fixes #71.
+ *
+ * The visitor returns a plain `{ type: 'html' }` node — NOT Sätteri's
+ * `{ rawHtml }` escape hatch. `rawHtml` applies MDX-style brace escaping that
+ * corrupts mermaid syntax (e.g. a decision node `B{Decision}` becomes
+ * `B{'{'}Decision{'}'}`), whereas an `html` node is emitted verbatim.
+ *
+ * @returns {{ name: string, code: Function }} a Sätteri mdast plugin definition
+ */
+function satteriMermaidPlugin(options = {}) {
+  return {
+    name: 'astro-mermaid',
+    code(node, context) {
+      if (node.lang !== 'mermaid') return;
+
+      if (options.logger) {
+        const file = context?.fileURL?.pathname || 'unknown file';
+        options.logger.info(`Sätteri transformed mermaid block in ${file}`);
+      }
+
+      return {
+        type: 'html',
+        value: `<pre class="mermaid">${escapeHtml(node.value)}</pre>`
+      };
+    }
+  };
+}
+
 /**
  * Escape a string for safe use inside an HTML attribute value.
  */
@@ -255,24 +289,94 @@ export default function astroMermaid(options = {}) {
           viteOptimizeDepsInclude.push('@mermaid-js/layout-elk');
         }
 
-        // Update markdown config to use both remark and rehype plugins
-        updateConfig({
-          markdown: {
-            remarkPlugins: [
-              ...(config.markdown?.remarkPlugins || []),
-              [remarkMermaidPlugin, { logger }]
-            ],
-            rehypePlugins: [
-              ...(config.markdown?.rehypePlugins || []),
-              [rehypeMermaidPlugin, { logger }]
-            ]
-          },
-          vite: {
-            optimizeDeps: {
-              include: viteOptimizeDepsInclude
+        const remarkEntry = [remarkMermaidPlugin, { logger }];
+        const rehypeEntry = [rehypeMermaidPlugin, { logger }];
+        const viteConfig = { optimizeDeps: { include: viteOptimizeDepsInclude } };
+
+        // Newer Astro versions expose the markdown engine on
+        // `config.markdown.processor`, and the deprecated top-level
+        // `markdown.remarkPlugins` / `markdown.rehypePlugins` arrays no longer
+        // run on it. We dispatch on the processor's `name`:
+        //   - 'unified' (Astro 6.4+): pass plugins via `unified({...})`. Fixes #62.
+        //   - 'satteri' (Astro 7+):   register an mdast plugin via `satteri({...})`. Fixes #71.
+        //   - no processor (Astro <6.4): fall back to the still-supported arrays.
+        // Branching on `name` (rather than importing both helper packages)
+        // matters because Astro 7 does not ship `@astrojs/markdown-remark`, so a
+        // blind import there would emit a misleading warning.
+        const existingProcessor = config.markdown?.processor;
+        let usedProcessor = false;
+
+        if (existingProcessor?.name === 'unified') {
+          try {
+            const { unified, isUnifiedProcessor } = await import('@astrojs/markdown-remark');
+            if (isUnifiedProcessor(existingProcessor)) {
+              const existingOptions = existingProcessor.options || {};
+              updateConfig({
+                markdown: {
+                  processor: unified({
+                    ...existingOptions,
+                    remarkPlugins: [...(existingOptions.remarkPlugins || []), remarkEntry],
+                    rehypePlugins: [...(existingOptions.rehypePlugins || []), rehypeEntry]
+                  })
+                },
+                vite: viteConfig
+              });
+              usedProcessor = true;
             }
+          } catch (error) {
+            // Dynamic import failed, the unified processor helpers are not
+            // exported, or updateConfig rejected the processor — fall through
+            // to the legacy plugin arrays below.
+            logger.warn(
+              `Could not configure the unified markdown processor, falling back ` +
+              `to remark/rehype plugin arrays: ${error.message}`
+            );
           }
-        });
+        } else if (existingProcessor?.name === 'satteri') {
+          try {
+            const { satteri, isSatteriProcessor } = await import('@astrojs/markdown-satteri');
+            if (isSatteriProcessor(existingProcessor)) {
+              const existingOptions = existingProcessor.options || {};
+              updateConfig({
+                markdown: {
+                  processor: satteri({
+                    ...existingOptions,
+                    mdastPlugins: [
+                      ...(existingOptions.mdastPlugins || []),
+                      satteriMermaidPlugin({ logger })
+                    ]
+                  })
+                },
+                vite: viteConfig
+              });
+              usedProcessor = true;
+            }
+          } catch (error) {
+            // Dynamic import failed or updateConfig rejected the processor —
+            // fall through to the legacy plugin arrays below.
+            logger.warn(
+              `Could not configure the Sätteri markdown processor, falling back ` +
+              `to remark/rehype plugin arrays: ${error.message}`
+            );
+          }
+        }
+
+        if (!usedProcessor) {
+          // Update markdown config to use both remark and rehype plugins
+          updateConfig({
+            markdown: {
+              remarkPlugins: [
+                ...(config.markdown?.remarkPlugins || []),
+                remarkEntry
+              ],
+              rehypePlugins: [
+                ...(config.markdown?.rehypePlugins || []),
+                rehypeEntry
+              ]
+            },
+            vite: viteConfig
+          });
+        }
 
         // Validate and serialize icon packs for client-side use.
         // Only the pack name and either inline icon data or a JSON URL string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-mermaid",
-  "version": "2.0.3",
+  "version": "2.1.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,6 +43,14 @@
     "mdast-util-to-string": "^4.0.0",
     "unist-util-visit": "^5.0.0"
   },
+  "overrides": {
+    "vite": "^7.3.5",
+    "esbuild": "^0.28.1",
+    "ip-address": "^10.1.1",
+    "js-yaml": "^4.2.0",
+    "picomatch": "^4.0.4",
+    "tar": "^7.5.16"
+  },
   "scripts": {
     "test": "vitest",
     "test:ui": "vitest --ui",
@@ -50,15 +58,17 @@
     "semantic-release": "semantic-release"
   },
   "devDependencies": {
+    "@astrojs/markdown-satteri": "^0.3.2",
     "@types/hast": "^3.0.4",
     "@vitest/ui": "^4.1.8",
-    "astro": "^6.0.0",
+    "astro": "^6.4.6",
     "hast-util-from-html": "^2.0.3",
     "mermaid": "^11.0.0",
     "rehype-parse": "^9.0.1",
     "rehype-stringify": "^10.0.1",
     "remark-mermaid": "^0.2.0",
     "remark-parse": "^11.0.0",
+    "satteri": "^0.9.2",
     "semantic-release": "^25.0.3",
     "typescript": "^5.0.0",
     "unified": "^11.0.5",