Skip to content

alexanderop/MarkVim

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MarkVim

MarkVim is a Nuxt 3 based Markdown editor that provides a full Vim editing experience. Built with CodeMirror 6 and modern web technologies, it offers live preview, document management, and enhanced Markdown features like Mermaid diagrams and GitHub style alerts.

Features

  • Full Vim Experience: Complete vim mode with custom keybindings support
  • Live Preview: Real-time Markdown preview with synced scrolling
  • Document Management: Local storage with CRUD operations for documents
  • Enhanced Markdown: Support for Mermaid diagrams, footnotes, and GitHub alerts
  • Keyboard-First: Extensive shortcuts and command palette
  • Theme Customization: Dynamic color themes with OKLCH color picker
  • Modern Tech Stack: Built with Nuxt 3, CodeMirror 6, Pinia, and UnoCSS
  • Mobile Responsive: Adaptive layouts for all screen sizes

Installation

Use pnpm to install dependencies:

pnpm install

Development

Start the application at http://localhost:3000:

pnpm dev

Production Build

Create a production build and preview it locally:

pnpm build
pnpm preview

End-to-End Tests

MarkVim ships with Playwright+Cucumber tests. Start the dev server then run:

pnpm run test:e2e

Architecture

MarkVim follows a modular architecture:

  • src/modules/ – Feature modules (editor, documents, themes, etc.)
  • src/shared/ – Shared components, composables, and utilities
  • src/types/ – TypeScript type definitions
  • tests/ – End-to-end tests with Playwright + Cucumber

Each module contains its own API, components, composables, and stores for clean separation of concerns.

Module Independence Analysis

MarkVim includes a powerful analyzer to measure module independence and microfrontend readiness. The script uses AST parsing and event analysis to score modules based on single-spa best practices.

How It Works

The analyzer evaluates each module across multiple dimensions:

1. Event Coupling (frequency-weighted)

  • Tracks emitAppEvent() calls (module broadcasts changes)
  • Tracks onAppEvent() calls (module depends on other events)
  • Uses log-scaled penalties: high-frequency events penalized more than counts alone

2. Import Coupling (direct dependencies)

  • Scans for imports from ~/modules/*
  • External imports create tight coupling (5pt penalty each)
  • Only imports from other modules count (shared utilities excluded)

3. Code Size (extraction complexity)

  • Counts SLOC (Source Lines of Code) excluding comments/whitespace
  • Smooth size penalty after 800 lines (harder to extract)
  • Uses sigmoid curve instead of hard thresholds

4. Architecture Quality (bonus points)

  • api.ts file present: +5pts (good public interface)
  • events.ts file present: +5pts (clear event contract)
  • Utility modules: +10pts (should be highly independent)

5. Circular Dependencies

  • Detects import cycles using canonical DFS
  • Deduplicates cycles (A→B→A same as B→A→B)
  • Critical blocker for microfrontend extraction

Scoring System

Each module starts at 100 points. Penalties applied:

  • Event emissions: 2pts per unique event + log(frequency)
  • Event listeners: 3pts per unique event + log(frequency)
  • External imports: 5pts each (max -30)
  • Large size: log-scaled penalty after 800 SLOC (max -20)

Score Ranges:

  • 🟢 90-100%: Microfrontend-ready
  • 🔵 70-89%: Good independence, minor coupling
  • 🟡 50-69%: Moderate coupling, refactoring recommended
  • 🔴 0-49%: High coupling, major refactoring needed

Usage

Run analysis (text output):

pnpm analyze:modules

Export as JSON (for tracking over time):

pnpm analyze:modules:json > analysis.json

Generate Mermaid graph (visual dependency map):

pnpm analyze:modules:mermaid > docs/dependencies.md

CI validation (fail if score < 70 or cycles detected):

pnpm analyze:modules:ci

CLI Options

tsx scripts/analyze-module-independence.ts [options]

--format <type>        Output format: text, json, or mermaid (default: text)
--output <file>        Save to file instead of stdout
--threshold <score>    Exit code 1 if avg score below threshold
--fail-on-cycle        Exit code 1 if circular dependencies found
--no-ast               Use regex fallback (faster but less accurate)
--alias <path>         Module import alias (default: ~/modules/)

Current Status

Overall Score: 88.2% (7/10 modules at 80%+)

Top Performers:

  • domain, feature-flags, font-preferences: 100%
  • editor: 99.6% (nearly perfect isolation)
  • markdown-preview: 100% (self-contained)

Needs Work:

  • documents: 60% (event coupling, central bottleneck)
  • layout: 72% (imports 5 modules, orchestration hub)
  • ⚠️ Circular dependency: layout ↔ share

Next Steps to 80%+ Readiness:

  1. Break layout→share cycle (use registration pattern)
  2. Reduce documents event coupling (batch related events)
  3. Refactor layout to use dependency injection

Contributing

Ensure code style is respected by running the linter:

pnpm run lint:fix

Feel free to open issues or pull requests to improve MarkVim.

About

A Markdown Editor written With Nuxt

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •