mrmd-js 2.0.0

package/src/analysis/is-complete.js

@@ -0,0 +1,394 @@
+/**
+ * Statement Completeness Checker
+ *
+ * Determines whether a piece of code is a complete statement that can
+ * be executed, or if it needs more input (like an unclosed bracket).
+ *
+ * @module analysis/is-complete
+ */
+
+/**
+ * @typedef {import('../types/analysis.js').IsCompleteResult} IsCompleteResult
+ */
+
+/**
+ * Check if code is a complete statement
+ *
+ * @param {string} code - The code to check
+ * @returns {IsCompleteResult}
+ */
+export function isComplete(code) {
+  const trimmed = code.trim();
+
+  // Empty code is complete
+  if (!trimmed) {
+    return { status: 'complete', indent: '' };
+  }
+
+  // Check bracket balance
+  const bracketInfo = checkBrackets(trimmed);
+  if (bracketInfo.unclosed > 0) {
+    return {
+      status: 'incomplete',
+      indent: '  '.repeat(bracketInfo.unclosed),
+    };
+  }
+  if (bracketInfo.unclosed < 0) {
+    return { status: 'invalid', indent: '' };
+  }
+
+  // Check for unterminated strings
+  const stringInfo = checkStrings(trimmed);
+  if (stringInfo.unclosed) {
+    return { status: 'incomplete', indent: '' };
+  }
+
+  // Check for trailing operators that suggest continuation
+  if (endsWithContinuation(trimmed)) {
+    return { status: 'incomplete', indent: '' };
+  }
+
+  // Check for incomplete template literals
+  if (hasIncompleteTemplate(trimmed)) {
+    return { status: 'incomplete', indent: '' };
+  }
+
+  // Try to parse to verify syntax
+  const parseResult = tryParse(code);
+  return parseResult;
+}
+
+/**
+ * Check bracket balance
+ * @param {string} code
+ * @returns {{ unclosed: number }}
+ */
+function checkBrackets(code) {
+  let depth = 0;
+  let inString = null;
+  let inTemplate = false;
+  let templateDepth = 0;
+  let inLineComment = false;
+  let inBlockComment = false;
+
+  for (let i = 0; i < code.length; i++) {
+    const char = code[i];
+    const prev = code[i - 1];
+    const next = code[i + 1];
+
+    // Handle escape sequences in strings
+    if ((inString || inTemplate) && prev === '\\') {
+      continue;
+    }
+
+    // Handle comments
+    if (!inString && !inTemplate && !inBlockComment && char === '/' && next === '/') {
+      inLineComment = true;
+      continue;
+    }
+    if (inLineComment && char === '\n') {
+      inLineComment = false;
+      continue;
+    }
+    if (inLineComment) continue;
+
+    if (!inString && !inTemplate && !inLineComment && char === '/' && next === '*') {
+      inBlockComment = true;
+      i++;
+      continue;
+    }
+    if (inBlockComment && char === '*' && next === '/') {
+      inBlockComment = false;
+      i++;
+      continue;
+    }
+    if (inBlockComment) continue;
+
+    // Handle strings
+    if (!inTemplate && (char === '"' || char === "'")) {
+      if (inString === char) {
+        inString = null;
+      } else if (!inString) {
+        inString = char;
+      }
+      continue;
+    }
+
+    // Handle template literals
+    if (char === '`') {
+      if (inTemplate && templateDepth === 0) {
+        inTemplate = false;
+      } else if (!inString) {
+        inTemplate = true;
+        templateDepth = 0;
+      }
+      continue;
+    }
+
+    // Handle template expressions ${...}
+    if (inTemplate && char === '$' && next === '{') {
+      templateDepth++;
+      continue;
+    }
+    if (inTemplate && templateDepth > 0 && char === '}') {
+      templateDepth--;
+      continue;
+    }
+
+    // Skip bracket counting inside strings
+    if (inString) continue;
+    if (inTemplate && templateDepth === 0) continue;
+
+    // Count brackets
+    if (char === '{' || char === '[' || char === '(') {
+      depth++;
+    } else if (char === '}' || char === ']' || char === ')') {
+      depth--;
+    }
+  }
+
+  return { unclosed: depth };
+}
+
+/**
+ * Check for unterminated strings
+ * @param {string} code
+ * @returns {{ unclosed: boolean }}
+ */
+function checkStrings(code) {
+  let inString = null;
+  let inTemplate = false;
+
+  for (let i = 0; i < code.length; i++) {
+    const char = code[i];
+    const prev = code[i - 1];
+
+    // Skip escaped characters
+    if (prev === '\\') continue;
+
+    // Skip comments
+    if (!inString && !inTemplate && char === '/' && code[i + 1] === '/') {
+      // Find end of line
+      const newline = code.indexOf('\n', i);
+      if (newline === -1) break;
+      i = newline;
+      continue;
+    }
+
+    if (!inString && !inTemplate && char === '/' && code[i + 1] === '*') {
+      const end = code.indexOf('*/', i + 2);
+      if (end === -1) break;
+      i = end + 1;
+      continue;
+    }
+
+    // Track strings
+    if (!inTemplate && (char === '"' || char === "'")) {
+      if (inString === char) {
+        inString = null;
+      } else if (!inString) {
+        inString = char;
+      }
+    }
+
+    // Track template literals
+    if (!inString && char === '`') {
+      inTemplate = !inTemplate;
+    }
+  }
+
+  return { unclosed: inString !== null || inTemplate };
+}
+
+/**
+ * Check if code ends with a continuation operator
+ * @param {string} code
+ * @returns {boolean}
+ */
+function endsWithContinuation(code) {
+  // Remove trailing whitespace and comments
+  let trimmed = code.trim();
+
+  // Remove trailing line comment
+  const lines = trimmed.split('\n');
+  let lastLine = lines[lines.length - 1].trim();
+  const commentIndex = findLineCommentStart(lastLine);
+  if (commentIndex !== -1) {
+    lastLine = lastLine.slice(0, commentIndex).trim();
+    if (!lastLine) {
+      // Line was only a comment, check previous lines
+      for (let i = lines.length - 2; i >= 0; i--) {
+        lastLine = lines[i].trim();
+        const ci = findLineCommentStart(lastLine);
+        if (ci !== -1) {
+          lastLine = lastLine.slice(0, ci).trim();
+        }
+        if (lastLine) break;
+      }
+    }
+  }
+
+  if (!lastLine) return false;
+
+  // Operators that suggest continuation
+  const continuationOps = [
+    '+', '-', '*', '/', '%', '**',
+    '=', '+=', '-=', '*=', '/=', '%=',
+    '==', '===', '!=', '!==',
+    '<', '>', '<=', '>=',
+    '&&', '||', '??',
+    '&', '|', '^', '~',
+    '<<', '>>', '>>>',
+    '?', ':',
+    ',',
+    '.',
+    '=>',
+  ];
+
+  for (const op of continuationOps) {
+    if (lastLine.endsWith(op)) {
+      return true;
+    }
+  }
+
+  // Keywords that suggest continuation
+  const continuationKeywords = [
+    'return', 'throw', 'new', 'typeof', 'void', 'delete',
+    'await', 'yield', 'in', 'of', 'instanceof',
+    'else', 'extends', 'implements',
+  ];
+
+  for (const kw of continuationKeywords) {
+    if (lastLine === kw || lastLine.endsWith(' ' + kw)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Find line comment start, accounting for strings
+ * @param {string} line
+ * @returns {number}
+ */
+function findLineCommentStart(line) {
+  let inString = null;
+
+  for (let i = 0; i < line.length; i++) {
+    const char = line[i];
+    const prev = line[i - 1];
+
+    if (prev === '\\') continue;
+
+    if (!inString && (char === '"' || char === "'" || char === '`')) {
+      inString = char;
+    } else if (inString === char) {
+      inString = null;
+    } else if (!inString && char === '/' && line[i + 1] === '/') {
+      return i;
+    }
+  }
+
+  return -1;
+}
+
+/**
+ * Check for incomplete template literal expressions
+ * @param {string} code
+ * @returns {boolean}
+ */
+function hasIncompleteTemplate(code) {
+  let inTemplate = false;
+  let expressionDepth = 0;
+
+  for (let i = 0; i < code.length; i++) {
+    const char = code[i];
+    const prev = code[i - 1];
+    const next = code[i + 1];
+
+    if (prev === '\\') continue;
+
+    if (char === '`') {
+      if (inTemplate && expressionDepth === 0) {
+        inTemplate = false;
+      } else if (!inTemplate) {
+        inTemplate = true;
+        expressionDepth = 0;
+      }
+    } else if (inTemplate && char === '$' && next === '{') {
+      expressionDepth++;
+      i++;
+    } else if (inTemplate && expressionDepth > 0) {
+      if (char === '{') expressionDepth++;
+      else if (char === '}') expressionDepth--;
+    }
+  }
+
+  return inTemplate;
+}
+
+/**
+ * Try to parse the code to check for syntax errors
+ * @param {string} code
+ * @returns {IsCompleteResult}
+ */
+function tryParse(code) {
+  try {
+    // Try to parse as a function body
+    new Function(code);
+    return { status: 'complete', indent: '' };
+  } catch (e) {
+    if (e instanceof SyntaxError) {
+      const msg = e.message.toLowerCase();
+
+      // Patterns that indicate incomplete code
+      const incompletePatterns = [
+        'unexpected end',
+        'unterminated',
+        'expected',
+        'missing',
+      ];
+
+      for (const pattern of incompletePatterns) {
+        if (msg.includes(pattern)) {
+          return { status: 'incomplete', indent: '' };
+        }
+      }
+
+      // Other syntax errors are invalid
+      return { status: 'invalid', indent: '' };
+    }
+
+    return { status: 'unknown', indent: '' };
+  }
+}
+
+/**
+ * Get suggested indent for continuation
+ * @param {string} code
+ * @returns {string}
+ */
+export function getSuggestedIndent(code) {
+  const lines = code.split('\n');
+  const lastLine = lines[lines.length - 1];
+
+  // Get current indent
+  const match = lastLine.match(/^(\s*)/);
+  const currentIndent = match ? match[1] : '';
+
+  // Check if we should increase indent
+  const trimmed = lastLine.trim();
+  const shouldIncrease =
+    trimmed.endsWith('{') ||
+    trimmed.endsWith('[') ||
+    trimmed.endsWith('(') ||
+    trimmed.endsWith(':') ||
+    trimmed.endsWith('=>');
+
+  if (shouldIncrease) {
+    return currentIndent + '  ';
+  }
+
+  return currentIndent;
+}

package/src/constants.js

@@ -0,0 +1,44 @@
+/**
+ * Constants
+ *
+ * Runtime constants for mrmd-js.
+ * @module constants
+ */
+
+/** Runtime name */
+export const RUNTIME_NAME = 'mrmd-js';
+
+/** Runtime version */
+export const RUNTIME_VERSION = '2.0.0';
+
+/** Default session ID */
+export const DEFAULT_SESSION = 'default';
+
+/** Default max sessions */
+export const DEFAULT_MAX_SESSIONS = 10;
+
+/** Supported languages */
+export const SUPPORTED_LANGUAGES = [
+  'javascript',
+  'js',
+  'html',
+  'htm',
+  'css',
+  'style',
+];
+
+/** Default features */
+export const DEFAULT_FEATURES = {
+  execute: true,
+  executeStream: true,
+  interrupt: false, // Limited in browser
+  complete: true,
+  inspect: true,
+  hover: true,
+  variables: true,
+  variableExpand: true,
+  reset: true,
+  isComplete: true,
+  format: true,
+  assets: true,
+};

package/src/execute/css.js

@@ -0,0 +1,205 @@
+/**
+ * CSS Executor
+ *
+ * Executes CSS cells by producing displayData with text/css MIME type.
+ * Supports optional scoping to prevent style leakage.
+ *
+ * @module execute/css
+ */
+
+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
+ */
+
+/**
+ * Generate a unique scope class name
+ * @param {string} [id] - Optional ID to include
+ * @returns {string}
+ */
+export function generateScopeClass(id) {
+  const suffix = id
+    ? id.replace(/[^a-z0-9]/gi, '')
+    : Math.random().toString(36).slice(2, 8);
+  return `mrmd-scope-${suffix}`;
+}
+
+/**
+ * Scope CSS selectors by prefixing them with a scope selector
+ *
+ * @param {string} css - CSS content
+ * @param {string} scopeSelector - Scope selector (e.g., '.mrmd-scope-abc123')
+ * @returns {string} Scoped CSS
+ *
+ * @example
+ * scopeStyles('.card { color: red; }', '.scope-123')
+ * // Returns: '.scope-123 .card { color: red; }'
+ */
+export function scopeStyles(css, scopeSelector) {
+  return css.replace(
+    /([^{}]+)\{/g,
+    (match, selectors) => {
+      const scoped = selectors
+        .split(',')
+        .map((selector) => {
+          const trimmed = selector.trim();
+
+          // Don't scope special selectors
+          if (
+            // @-rules (media, keyframes, supports, etc.)
+            trimmed.startsWith('@') ||
+            // Keyframe percentages and keywords
+            trimmed.startsWith('from') ||
+            trimmed.startsWith('to') ||
+            /^\d+%$/.test(trimmed) ||
+            // Empty selector
+            !trimmed
+          ) {
+            return trimmed;
+          }
+
+          // Handle :root specially - replace with scope selector
+          if (trimmed === ':root') {
+            return scopeSelector;
+          }
+
+          // Handle :host (for shadow DOM compatibility)
+          if (trimmed === ':host') {
+            return scopeSelector;
+          }
+
+          // Handle * selector
+          if (trimmed === '*') {
+            return `${scopeSelector} *`;
+          }
+
+          // Handle html/body - scope to container instead
+          if (trimmed === 'html' || trimmed === 'body') {
+            return scopeSelector;
+          }
+
+          // Prefix the selector
+          return `${scopeSelector} ${trimmed}`;
+        })
+        .join(', ');
+
+      return `${scoped} {`;
+    }
+  );
+}
+
+/**
+ * Parse CSS to extract rule information
+ * @param {string} css
+ * @returns {{ rules: number, selectors: string[], variables: string[] }}
+ */
+function parseCssInfo(css) {
+  const selectors = [];
+  const variables = [];
+
+  // Count rules (rough estimate by counting {)
+  const rules = (css.match(/\{/g) || []).length;
+
+  // Extract selectors (before {)
+  const selectorMatches = css.match(/([^{}]+)\{/g) || [];
+  for (const match of selectorMatches) {
+    const selector = match.replace('{', '').trim();
+    if (selector && !selector.startsWith('@')) {
+      selectors.push(...selector.split(',').map((s) => s.trim()));
+    }
+  }
+
+  // Extract CSS custom properties (--var-name)
+  const varMatches = css.match(/--[\w-]+/g) || [];
+  variables.push(...new Set(varMatches));
+
+  return { rules, selectors: selectors.slice(0, 10), variables: variables.slice(0, 10) };
+}
+
+/**
+ * CSS executor - produces displayData for CSS content
+ */
+export class CssExecutor extends BaseExecutor {
+  /** @type {readonly string[]} */
+  languages = ['css', 'style', 'stylesheet'];
+
+  /**
+   * Execute CSS cell
+   * @param {string} code - CSS content
+   * @param {ExecutionContext} context - Execution context
+   * @param {ExecuteOptions} [options] - Execution options
+   * @returns {Promise<ExecutionResult>}
+   */
+  async execute(code, context, options = {}) {
+    const startTime = performance.now();
+
+    // Determine if scoping is requested
+    const shouldScope = options.cellMeta?.scoped ?? options.cellMeta?.scope ?? false;
+    const scopeId = options.execId || options.cellId || `css-${Date.now()}`;
+    const scopeClass = shouldScope ? generateScopeClass(scopeId) : undefined;
+
+    // Apply scoping if requested
+    const processedCss = scopeClass ? scopeStyles(code, `.${scopeClass}`) : code;
+
+    // Parse CSS for info
+    const info = parseCssInfo(code);
+
+    // Build display data
+    /** @type {DisplayData[]} */
+    const displayData = [
+      {
+        data: {
+          'text/css': processedCss,
+        },
+        metadata: {
+          // Original CSS (before scoping)
+          original: code !== processedCss ? code : undefined,
+          // Scoping info
+          scoped: !!scopeClass,
+          scopeClass,
+          // CSS info
+          ruleCount: info.rules,
+          selectors: info.selectors,
+          customProperties: info.variables,
+          // Client hints
+          inject: options.cellMeta?.inject ?? true,
+          target: options.cellMeta?.target,
+        },
+      },
+    ];
+
+    const duration = performance.now() - startTime;
+
+    // Build info message
+    const parts = [`${info.rules} rule${info.rules !== 1 ? 's' : ''}`];
+    if (scopeClass) {
+      parts.push(`scoped to .${scopeClass}`);
+    }
+    if (info.variables.length > 0) {
+      parts.push(`${info.variables.length} variable${info.variables.length !== 1 ? 's' : ''}`);
+    }
+
+    return {
+      success: true,
+      stdout: `CSS: ${parts.join(', ')}`,
+      stderr: '',
+      result: undefined,
+      displayData,
+      assets: [],
+      executionCount: 0,
+      duration,
+    };
+  }
+}
+
+/**
+ * Create a CSS executor
+ * @returns {CssExecutor}
+ */
+export function createCssExecutor() {
+  return new CssExecutor();
+}