mrmd-js 2.0.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mrmd-js",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "MRP-compliant browser JavaScript runtime for mrmd notebooks",
   "type": "module",
   "main": "dist/index.cjs",

package/src/execute/index.js

@@ -21,12 +21,14 @@ export {
   scopeStyles,
   generateScopeClass,
 } from './css.js';
+export { MermaidExecutor, createMermaidExecutor } from './mermaid.js';
 
 // Import for factory function
 import { ExecutorRegistry } from './registry.js';
 import { JavaScriptExecutor } from './javascript.js';
 import { HtmlExecutor } from './html.js';
 import { CssExecutor } from './css.js';
+import { MermaidExecutor } from './mermaid.js';
 
 /**
  * Create a registry with default executors registered
@@ -37,5 +39,6 @@ export function createDefaultExecutorRegistry() {
   registry.register(new JavaScriptExecutor());
   registry.register(new HtmlExecutor());
   registry.register(new CssExecutor());
+  registry.register(new MermaidExecutor());
   return registry;
 }

package/src/execute/mermaid.js

@@ -0,0 +1,137 @@
+/**
+ * Mermaid Executor
+ *
+ * Executes Mermaid diagram cells by rendering them to SVG.
+ * Loads mermaid from CDN on first use and returns HTML displayData.
+ *
+ * @module execute/mermaid
+ */
+
+import { BaseExecutor } from './interface.js';
+
+/**
+ * @typedef {import('../session/context/interface.js').ExecutionContext} ExecutionContext
+ * @typedef {import('../types/execution.js').ExecuteOptions} ExecuteOptions
+ * @typedef {import('../types/execution.js').ExecutionResult} ExecutionResult
+ * @typedef {import('../types/execution.js').DisplayData} DisplayData
+ */
+
+/** CDN URL for mermaid */
+const MERMAID_CDN = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
+
+/** Counter for unique diagram IDs */
+let diagramCounter = 0;
+
+/**
+ * Load mermaid from CDN if not already loaded
+ * @returns {Promise<void>}
+ */
+async function ensureMermaidLoaded() {
+  // Check if already loaded
+  if (typeof window !== 'undefined' && window.mermaid) {
+    return;
+  }
+
+  // Load from CDN
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = MERMAID_CDN;
+    script.onload = () => {
+      // Initialize mermaid with safe defaults
+      window.mermaid.initialize({
+        startOnLoad: false,
+        theme: 'default',
+        securityLevel: 'loose', // Allow clicks/links in diagrams
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      });
+      resolve();
+    };
+    script.onerror = () => reject(new Error('Failed to load mermaid from CDN'));
+    document.head.appendChild(script);
+  });
+}
+
+/**
+ * Mermaid executor - renders Mermaid diagrams to SVG
+ */
+export class MermaidExecutor extends BaseExecutor {
+  /** @type {readonly string[]} */
+  languages = ['mermaid'];
+
+  /**
+   * Execute Mermaid diagram cell
+   * @param {string} code - Mermaid diagram definition
+   * @param {ExecutionContext} context - Execution context
+   * @param {ExecuteOptions} [options] - Execution options
+   * @returns {Promise<ExecutionResult>}
+   */
+  async execute(code, context, options = {}) {
+    const startTime = performance.now();
+
+    try {
+      // Ensure mermaid is loaded
+      await ensureMermaidLoaded();
+
+      // Generate unique ID for this diagram
+      const diagramId = `mermaid-diagram-${++diagramCounter}`;
+
+      // Render the diagram
+      const { svg } = await window.mermaid.render(diagramId, code.trim());
+
+      const duration = performance.now() - startTime;
+
+      // Build display data with the rendered SVG
+      /** @type {DisplayData[]} */
+      const displayData = [
+        {
+          data: {
+            'text/html': svg,
+            'text/plain': `[Mermaid diagram rendered]`,
+          },
+          metadata: {
+            mermaid: true,
+            diagramId,
+          },
+        },
+      ];
+
+      return {
+        success: true,
+        stdout: '',
+        stderr: '',
+        result: undefined,
+        displayData,
+        assets: [],
+        executionCount: 0,
+        duration,
+      };
+    } catch (error) {
+      const duration = performance.now() - startTime;
+      const errorMessage = error instanceof Error ? error.message : String(error);
+
+      // Return error as stderr with helpful message
+      return {
+        success: false,
+        stdout: '',
+        stderr: `Mermaid rendering error: ${errorMessage}`,
+        result: undefined,
+        error: {
+          type: 'MermaidError',
+          message: errorMessage,
+        },
+        displayData: [],
+        assets: [],
+        executionCount: 0,
+        duration,
+      };
+    }
+  }
+}
+
+/**
+ * Create a Mermaid executor
+ * @returns {MermaidExecutor}
+ */
+export function createMermaidExecutor() {
+  return new MermaidExecutor();
+}

package/src/index.js

@@ -66,6 +66,9 @@ export {
   createCssExecutor,
   scopeStyles,
   generateScopeClass,
+  // Mermaid
+  MermaidExecutor,
+  createMermaidExecutor,
 } from './execute/index.js';
 
 // LSP Features (Phase 4)