monocart-code-viewer

A code viewer component with code coverage visualization, based on CodeMirror 6.

Features

• Syntax highlighting for JavaScript, CSS, HTML (with mixed language support)
• Line coverage indicators (covered / partial / uncovered)
• Inline execution count badges with hover highlighting
• Uncovered code range highlighting
• Custom decorations (e.g. "else path uncovered" markers)
• Read-only editor with code folding and search
• Cursor tracking events
• Touch device support

Install

npm i monocart-code-viewer

Usage

import { createCodeViewer } from 'monocart-code-viewer';
const codeViewer = createCodeViewer(container, report);

Report

The report object defines the source content and optional coverage data:

const report = {
    content: 'your source content',
    coverage: {

        // Line coverage status (key is 0-based line index)
        uncoveredLines: {
            '0': 'comment',
            '1': 'blank',
            '8': 'partial',
            '9': 'uncovered'
        },

        // Uncovered character ranges within a line (key is 0-based line index)
        uncoveredPieces: {
            '8': [{
                start: 27,
                end: 34
            }]
        },

        // Custom inline decorations (key is 0-based line index)
        decorations: {
            '14': [{
                column: 4,
                value: 'E',
                attrs: {
                    title: 'else path uncovered'
                }
            }]
        },

        // Execution count badges (key is 0-based line index)
        executionCounts: {
            '20': [{
                column: 22,
                count: 10,
                value: '10',
                end: 916
            }]
        }
    }
};

API

const codeViewer = createCodeViewer(container, report);

• codeViewer.on(eventType, handler) - Register an event listener

  codeViewer.on('cursor', (loc) => {
      // loc: { line, column, position, start?, end? }
  });
  

• codeViewer.update(newReport) - Update content and/or coverage data

  codeViewer.update(newReport);
  

• codeViewer.setSelection(start, end, options?) - Set text selection and scroll into view

  codeViewer.setSelection(100, 200);
  

• codeViewer.setCursor(pos, options?) - Set cursor position and scroll into view

  codeViewer.setCursor(100);
  

• codeViewer.viewer - Access the underlying CodeMirror EditorView instance