mrmd-js 2.0.0

package/src/execute/html.js

@@ -0,0 +1,162 @@
+/**
+ * HTML Executor
+ *
+ * Executes HTML cells by producing displayData with text/html MIME type.
+ * Optionally extracts and executes inline scripts.
+ *
+ * @module execute/html
+ */
+
+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
+ */
+
+/**
+ * Regex to match script tags and capture their content
+ */
+const SCRIPT_REGEX = /<script[^>]*>([\s\S]*?)<\/script>/gi;
+
+/**
+ * Regex to match style tags and capture their content
+ */
+const STYLE_REGEX = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+
+/**
+ * Extract script tags from HTML
+ * @param {string} html
+ * @returns {{ html: string, scripts: string[] }}
+ */
+function extractScripts(html) {
+  const scripts = [];
+
+  const cleaned = html.replace(SCRIPT_REGEX, (_, content) => {
+    if (content.trim()) {
+      scripts.push(content);
+    }
+    return '';
+  });
+
+  return { html: cleaned, scripts };
+}
+
+/**
+ * Extract style tags from HTML
+ * @param {string} html
+ * @returns {{ html: string, styles: string[] }}
+ */
+function extractStyles(html) {
+  const styles = [];
+
+  const cleaned = html.replace(STYLE_REGEX, (_, content) => {
+    if (content.trim()) {
+      styles.push(content);
+    }
+    return '';
+  });
+
+  return { html: cleaned, styles };
+}
+
+/**
+ * HTML executor - produces displayData for HTML content
+ */
+export class HtmlExecutor extends BaseExecutor {
+  /** @type {readonly string[]} */
+  languages = ['html', 'htm', 'xhtml'];
+
+  /**
+   * Execute HTML cell
+   * @param {string} code - HTML content
+   * @param {ExecutionContext} context - Execution context
+   * @param {ExecuteOptions} [options] - Execution options
+   * @returns {Promise<ExecutionResult>}
+   */
+  async execute(code, context, options = {}) {
+    const startTime = performance.now();
+
+    // Extract scripts and styles
+    const { html: htmlWithoutScripts, scripts } = extractScripts(code);
+    const { html: cleanHtml, styles } = extractStyles(htmlWithoutScripts);
+
+    // Build display data
+    /** @type {DisplayData[]} */
+    const displayData = [];
+
+    // Main HTML content
+    displayData.push({
+      data: {
+        'text/html': code, // Send original HTML including scripts/styles
+      },
+      metadata: {
+        // Metadata for client to decide how to render
+        hasScripts: scripts.length > 0,
+        hasStyles: styles.length > 0,
+        scriptCount: scripts.length,
+        styleCount: styles.length,
+        trusted: options.cellMeta?.trusted ?? false,
+        // Client can use this to decide whether to execute scripts
+        executeScripts: options.cellMeta?.executeScripts ?? true,
+      },
+    });
+
+    // Optionally include cleaned HTML (without scripts/styles) as alternate
+    if (scripts.length > 0 || styles.length > 0) {
+      displayData.push({
+        data: {
+          'text/html+safe': cleanHtml.trim(),
+        },
+        metadata: {
+          description: 'HTML content with scripts and styles removed',
+        },
+      });
+    }
+
+    // Include extracted styles as separate CSS display data
+    if (styles.length > 0) {
+      displayData.push({
+        data: {
+          'text/css': styles.join('\n\n'),
+        },
+        metadata: {
+          source: 'extracted',
+          description: 'Styles extracted from HTML',
+        },
+      });
+    }
+
+    const duration = performance.now() - startTime;
+
+    // Build info message
+    const parts = [];
+    if (cleanHtml.trim()) parts.push('HTML');
+    if (styles.length > 0) parts.push(`${styles.length} style${styles.length > 1 ? 's' : ''}`);
+    if (scripts.length > 0) parts.push(`${scripts.length} script${scripts.length > 1 ? 's' : ''}`);
+
+    return {
+      success: true,
+      stdout: `Rendered: ${parts.join(', ') || 'empty'}`,
+      stderr: '',
+      result: undefined,
+      displayData,
+      assets: [],
+      executionCount: 0,
+      duration,
+    };
+  }
+}
+
+/**
+ * Create an HTML executor
+ * @returns {HtmlExecutor}
+ */
+export function createHtmlExecutor() {
+  return new HtmlExecutor();
+}
+
+// Export utilities for use by clients
+export { extractScripts, extractStyles };

package/src/execute/index.js

@@ -0,0 +1,41 @@
+/**
+ * Execute Module
+ *
+ * Provides executors for different languages and the registry to manage them.
+ *
+ * @module execute
+ */
+
+// Interface
+export { BaseExecutor } from './interface.js';
+
+// Registry
+export { ExecutorRegistry, createExecutorRegistry } from './registry.js';
+
+// Executors
+export { JavaScriptExecutor, createJavaScriptExecutor } from './javascript.js';
+export { HtmlExecutor, createHtmlExecutor, extractScripts, extractStyles } from './html.js';
+export {
+  CssExecutor,
+  createCssExecutor,
+  scopeStyles,
+  generateScopeClass,
+} from './css.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';
+
+/**
+ * Create a registry with default executors registered
+ * @returns {ExecutorRegistry}
+ */
+export function createDefaultExecutorRegistry() {
+  const registry = new ExecutorRegistry();
+  registry.register(new JavaScriptExecutor());
+  registry.register(new HtmlExecutor());
+  registry.register(new CssExecutor());
+  return registry;
+}

package/src/execute/interface.js

@@ -0,0 +1,144 @@
+/**
+ * Executor Interface
+ *
+ * Defines the contract for language executors.
+ * Each executor handles one or more languages and produces MRP-compliant results.
+ *
+ * @module execute/interface
+ */
+
+/**
+ * @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/streaming.js').StreamEvent} StreamEvent
+ */
+
+/**
+ * @typedef {Object} Executor
+ * @property {readonly string[]} languages - Language identifiers this executor handles
+ * @property {function(string, ExecutionContext, ExecuteOptions=): Promise<ExecutionResult>} execute - Execute code
+ * @property {function(string, ExecutionContext, ExecuteOptions=): AsyncGenerator<StreamEvent>} [executeStream] - Execute with streaming
+ */
+
+/**
+ * @typedef {Object} ExecutorConfig
+ * @property {string[]} languages - Language identifiers to register
+ */
+
+/**
+ * Base class for executors (optional, executors can also be plain objects)
+ * @abstract
+ */
+export class BaseExecutor {
+  /** @type {readonly string[]} */
+  languages = [];
+
+  /**
+   * Execute code
+   * @param {string} code - Code to execute
+   * @param {ExecutionContext} context - Execution context
+   * @param {ExecuteOptions} [options] - Execution options
+   * @returns {Promise<ExecutionResult>}
+   * @abstract
+   */
+  async execute(code, context, options = {}) {
+    throw new Error('execute() must be implemented by subclass');
+  }
+
+  /**
+   * Execute code with streaming output
+   * Default implementation wraps execute() result
+   *
+   * @param {string} code - Code to execute
+   * @param {ExecutionContext} context - Execution context
+   * @param {ExecuteOptions} [options] - Execution options
+   * @returns {AsyncGenerator<StreamEvent>}
+   */
+  async *executeStream(code, context, options = {}) {
+    const execId = options.execId || `exec-${Date.now()}`;
+    const timestamp = new Date().toISOString();
+
+    // Start event
+    yield /** @type {import('../types/streaming.js').StartEvent} */ ({
+      type: 'start',
+      execId,
+      timestamp,
+    });
+
+    try {
+      // Execute
+      const result = await this.execute(code, context, options);
+
+      // Stream stdout
+      if (result.stdout) {
+        yield /** @type {import('../types/streaming.js').StdoutEvent} */ ({
+          type: 'stdout',
+          content: result.stdout,
+          accumulated: result.stdout,
+        });
+      }
+
+      // Stream stderr
+      if (result.stderr) {
+        yield /** @type {import('../types/streaming.js').StderrEvent} */ ({
+          type: 'stderr',
+          content: result.stderr,
+          accumulated: result.stderr,
+        });
+      }
+
+      // Stream display data
+      for (const display of result.displayData) {
+        yield /** @type {import('../types/streaming.js').DisplayEvent} */ ({
+          type: 'display',
+          data: display.data,
+          metadata: display.metadata,
+        });
+      }
+
+      // Stream assets
+      for (const asset of result.assets) {
+        yield /** @type {import('../types/streaming.js').AssetEvent} */ ({
+          type: 'asset',
+          path: asset.path,
+          url: asset.url,
+          mimeType: asset.mimeType,
+          assetType: asset.assetType,
+        });
+      }
+
+      // Result event
+      yield /** @type {import('../types/streaming.js').ResultEvent} */ ({
+        type: 'result',
+        result,
+      });
+    } catch (error) {
+      // Error event
+      yield /** @type {import('../types/streaming.js').ErrorEvent} */ ({
+        type: 'error',
+        error: {
+          type: error instanceof Error ? error.name : 'Error',
+          message: error instanceof Error ? error.message : String(error),
+          traceback: error instanceof Error && error.stack ? error.stack.split('\n') : undefined,
+        },
+      });
+    }
+
+    // Done event
+    yield /** @type {import('../types/streaming.js').DoneEvent} */ ({
+      type: 'done',
+    });
+  }
+
+  /**
+   * Check if this executor supports a language
+   * @param {string} language
+   * @returns {boolean}
+   */
+  supports(language) {
+    return this.languages.includes(language.toLowerCase());
+  }
+}
+
+export {};

package/src/execute/javascript.js

@@ -0,0 +1,197 @@
+/**
+ * JavaScript Executor
+ *
+ * Executes JavaScript code in an execution context.
+ * Handles variable persistence, async/await, and console output.
+ *
+ * @module execute/javascript
+ */
+
+import { BaseExecutor } from './interface.js';
+import { transformForPersistence } from '../transform/persistence.js';
+import { wrapWithLastExpression } from '../transform/async.js';
+import { extractDeclaredVariables } from '../transform/extract.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').ExecutionError} ExecutionError
+ * @typedef {import('../types/execution.js').DisplayData} DisplayData
+ */
+
+/**
+ * Format a value for display as a string
+ * @param {*} value
+ * @param {number} [maxLength=1000]
+ * @returns {string | undefined}
+ */
+function formatValue(value, maxLength = 1000) {
+  if (value === undefined) return undefined;
+  if (value === null) return 'null';
+
+  if (typeof value === 'function') {
+    return `[Function: ${value.name || 'anonymous'}]`;
+  }
+
+  if (typeof value === 'symbol') {
+    return value.toString();
+  }
+
+  if (typeof value === 'object') {
+    try {
+      const json = JSON.stringify(value, null, 2);
+      if (json.length > maxLength) {
+        return json.slice(0, maxLength) + '...';
+      }
+      return json;
+    } catch {
+      return String(value);
+    }
+  }
+
+  const str = String(value);
+  if (str.length > maxLength) {
+    return str.slice(0, maxLength) + '...';
+  }
+  return str;
+}
+
+/**
+ * JavaScript executor
+ */
+export class JavaScriptExecutor extends BaseExecutor {
+  /** @type {readonly string[]} */
+  languages = ['javascript', 'js', 'ecmascript', 'es'];
+
+  /**
+   * Execute JavaScript code
+   * @param {string} code - Code to execute
+   * @param {ExecutionContext} context - Execution context
+   * @param {ExecuteOptions} [options] - Execution options
+   * @returns {Promise<ExecutionResult>}
+   */
+  async execute(code, context, options = {}) {
+    const startTime = performance.now();
+
+    // Extract and track declared variables
+    const declaredVars = extractDeclaredVariables(code);
+    for (const varName of declaredVars) {
+      context.trackVariable(varName);
+    }
+
+    // Transform code for persistence (const/let → var)
+    const transformed = transformForPersistence(code);
+
+    // Wrap to capture last expression value and support async
+    const wrapped = wrapWithLastExpression(transformed);
+
+    try {
+      // Execute in context (pass execId for input() support)
+      const rawResult = await context.execute(wrapped, { execId: options.execId });
+      const duration = performance.now() - startTime;
+
+      // Format result
+      return this.#formatResult(rawResult, context, duration, options);
+    } catch (error) {
+      const duration = performance.now() - startTime;
+
+      return {
+        success: false,
+        stdout: '',
+        stderr: error instanceof Error ? `${error.name}: ${error.message}` : String(error),
+        error: this.#formatError(error),
+        displayData: [],
+        assets: [],
+        executionCount: 0,
+        duration,
+      };
+    }
+  }
+
+  /**
+   * Format raw execution result to MRP ExecutionResult
+   * @param {import('../session/context/interface.js').RawExecutionResult} raw
+   * @param {ExecutionContext} context
+   * @param {number} duration
+   * @param {ExecuteOptions} options
+   * @returns {ExecutionResult}
+   */
+  #formatResult(raw, context, duration, options) {
+    // Separate logs into stdout/stderr
+    const stdout = raw.logs
+      .filter((log) => log.type === 'log' || log.type === 'info')
+      .map((log) => log.args.map((arg) => formatValue(arg) ?? '').join(' '))
+      .join('\n');
+
+    const stderr = raw.logs
+      .filter((log) => log.type === 'error' || log.type === 'warn')
+      .map((log) => {
+        const prefix = log.type === 'error' ? 'Error: ' : 'Warning: ';
+        return prefix + log.args.map((arg) => formatValue(arg) ?? '').join(' ');
+      })
+      .join('\n');
+
+    // Format error if present
+    /** @type {ExecutionError | undefined} */
+    let error;
+    if (raw.error) {
+      error = this.#formatError(raw.error);
+    }
+
+    // Get display data from context
+    /** @type {DisplayData[]} */
+    const displayData = 'getDisplayQueue' in context ? context.getDisplayQueue() : [];
+
+    return {
+      success: !raw.error,
+      stdout,
+      stderr,
+      result: raw.result,
+      resultString: formatValue(raw.result),
+      error,
+      displayData,
+      assets: [],
+      executionCount: 0, // Will be set by session
+      duration,
+    };
+  }
+
+  /**
+   * Format an error
+   * @param {*} error
+   * @returns {ExecutionError}
+   */
+  #formatError(error) {
+    if (error instanceof Error) {
+      /** @type {ExecutionError} */
+      const formatted = {
+        type: error.name,
+        message: error.message,
+        traceback: error.stack?.split('\n'),
+      };
+
+      // Try to extract line/column from stack
+      const lineMatch = error.stack?.match(/:(\d+):(\d+)/);
+      if (lineMatch) {
+        formatted.line = parseInt(lineMatch[1], 10);
+        formatted.column = parseInt(lineMatch[2], 10);
+      }
+
+      return formatted;
+    }
+
+    return {
+      type: 'Error',
+      message: String(error),
+    };
+  }
+}
+
+/**
+ * Create a JavaScript executor
+ * @returns {JavaScriptExecutor}
+ */
+export function createJavaScriptExecutor() {
+  return new JavaScriptExecutor();
+}