🔧 MDC Component System - Complete Usage Guide

The Enhanced Markdown Renderer now supports comprehensive dynamic rendering of Angular components within MDC files using a robust component factory system with full error handling, performance optimization, and extensibility.

✅ What's Implemented

• 🧩 Dynamic Component Rendering: MDC components render as fully functional Angular components with real interactivity
• 🛡️ Robust Error Handling: Graceful fallbacks, user-friendly error messages, and retry mechanisms
• ⚡ Performance Optimization: Lazy loading, caching, memory management, and efficient rendering
• 🔧 Extensible Architecture: Easy to add new component types without modifying core files
• 📱 Accessibility Support: Full screen reader support, keyboard navigation, and ARIA compliance
• 🎨 Theme Integration: Complete integration with the theme system and responsive design

🚀 Quick Start

1. Basic Usage in MDC Files

<!-- Code Block Component -->
<mdc:code-block language="typescript" title="Example TypeScript Code">
export class MyComponent {
  constructor() {
    console.log('Hello World!');
  }
}
</mdc:code-block>

<!-- Mermaid Diagram Component -->
<mdc:mermaid theme="default" title="System Architecture">
graph TD
  A[Start] --> B[Process]
  B --> C[End]
</mdc:mermaid>

2. Adding New Component Types

// In the initializeComponentRegistry method
this.registerMDCComponent('mdc:my-widget', MyWidgetComponent);

// Create input handler in setComponentInputs method
case 'mdc:my-widget':
  if (instance.widgetType !== undefined) {
    instance.widgetType = config.props?.type || 'default';
  }
  if (instance.data !== undefined) {
    instance.data = config.props?.data || {};
  }
  break;

3. Widget Component Example

<!-- In your MDC file -->
<mdc:widget type="chart" data="{&quot;values&quot;:[1,2,3,4,5]}">
  Chart Widget Content
</mdc:widget>

🧩 Currently Supported Components

🔧 Advanced Usage

Custom Component Registration

// Register component at runtime
this.markdownRenderer.registerMDCComponent('mdc:custom-chart', CustomChartComponent);

// Check registered components
console.log(this.markdownRenderer.getRegisteredComponentTypes());

Error Handling

The system automatically handles:

• ❌ Invalid component configurations
• ❌ Missing component classes
• ❌ Runtime component errors
• ✅ Graceful fallbacks to HTML rendering

🐛 Troubleshooting

Component Not Rendering?

1. Check Console: Look for error messages starting with 🔧, 📋, or ❌
2. Verify Registration: Ensure component is registered in initializeComponentRegistry()
3. Check Syntax: Validate MDC component syntax in your .mdc file
4. Input Properties: Make sure component inputs are properly defined

Common Issues

// ❌ Wrong - Component not registered
<mdc:my-component>Content</mdc:my-component>

// ✅ Correct - Register first, then use
this.registerMDCComponent('mdc:my-component', MyComponent);

📚 Next Steps

1. Add Widget Components: Register your widget library components
2. Create Interactive Demos: Implement interactive demo components
3. Extend Error Handling: Add specific error types for better debugging
4. Performance Optimization: Add lazy loading for heavy components

This system provides a robust foundation for rendering dynamic Angular components within documentation content while maintaining proper memory management and error handling.