#!/usr/bin/env python3 """ Demo script showing TestDrive JSUI plugin integration with Markitect This script demonstrates: 1. Plugin discovery and registration 2. Asset management and deployment 3. Standalone development vs production rendering 4. Clean separation between Python and JavaScript """ from pathlib import Path import json # Import the new plugin system from markitect.plugins import ( PluginManager, RenderingEngineManager, RenderingConfig ) from markitect.plugins.testdrive_jsui import TestDriveJSUIEngine def demo_standalone_development(): """Demo standalone development workflow.""" print("๐Ÿงช Demonstrating Standalone Development Workflow") print("=" * 50) # Initialize the TestDrive JSUI engine directly engine = TestDriveJSUIEngine() # Read test content test_content_path = Path("testdrive-jsui/test-documents/sample.md") if test_content_path.exists(): test_content = test_content_path.read_text() else: test_content = "# Demo Content\n\nThis is demo content for testing." # Create standalone test document output_path = Path("/tmp/testdrive_standalone_demo.html") print(f"๐Ÿ“„ Creating standalone test document: {output_path}") try: engine.create_standalone_test_document(test_content, output_path) print(f"โœ… Success! Open in browser: file://{output_path}") except Exception as e: print(f"โŒ Error creating standalone document: {e}") return engine def demo_plugin_discovery(): """Demo plugin discovery through the main system.""" print("\n๐Ÿ” Demonstrating Plugin Discovery") print("=" * 50) # Initialize plugin manager plugin_manager = PluginManager() print("๐Ÿ“‹ Discovering all plugins...") all_plugins = plugin_manager.discover_plugins() # Show all discovered plugins for plugin_name, plugin_info in all_plugins.items(): print(f" ๐Ÿ”Œ {plugin_name}: {plugin_info.get('type', 'unknown')}") # Initialize rendering engine manager rendering_manager = RenderingEngineManager(plugin_manager) print("\n๐ŸŽจ Available rendering engines:") for engine_name in rendering_manager.list_engines(): engine = rendering_manager.get_engine(engine_name) if engine: print(f" ๐ŸŽฏ {engine_name}: modes={engine.get_supported_modes()}") return rendering_manager def demo_production_deployment(): """Demo production deployment with asset management.""" print("\n๐Ÿš€ Demonstrating Production Deployment") print("=" * 50) # Create production configuration output_dir = Path("/tmp/demo_production_output") output_dir.mkdir(exist_ok=True) config = RenderingConfig( asset_base_url="_markitect", development_mode=False, output_directory=output_dir ) # Initialize engine engine = TestDriveJSUIEngine() # Demo content demo_content = """# Production Demo This demonstrates production deployment of the TestDrive JSUI plugin. ## Features - Asset deployment to `_markitect/plugins/testdrive-jsui/` - Production-ready HTML generation - Clean JavaScript-Python separation ## Testing Open the generated HTML file to test the production deployment. """ print(f"๐Ÿ“ Output directory: {output_dir}") print(f"๐Ÿ”ง Asset base URL: {config.asset_base_url}") # Render document try: html_content = engine.render_document(demo_content, "edit", config) # Save to output directory output_file = output_dir / "demo_production.html" output_file.write_text(html_content) print(f"โœ… Production document created: {output_file}") print(f"๐ŸŒ Open in browser: file://{output_file}") # Show asset requirements assets = engine.get_required_assets() print(f"\n๐Ÿ“ฆ Required assets:") for asset_type, asset_list in assets.items(): print(f" {asset_type}: {len(asset_list)} files") for asset in asset_list[:3]: # Show first 3 print(f" - {asset}") if len(asset_list) > 3: print(f" ... and {len(asset_list) - 3} more") except Exception as e: print(f"โŒ Error in production deployment: {e}") return output_dir def demo_asset_url_generation(): """Demo asset URL generation for different modes.""" print("\n๐Ÿ”— Demonstrating Asset URL Generation") print("=" * 50) engine = TestDriveJSUIEngine() # Development configuration dev_config = RenderingConfig( asset_base_url=".", development_mode=True, plugin_source_dirs={ "testdrive-jsui": Path("testdrive-jsui") } ) # Production configuration prod_config = RenderingConfig( asset_base_url="_markitect", development_mode=False ) sample_assets = ["static/js/main.js", "static/css/editor.css", "images/icon.png"] print("Development URLs:") for asset in sample_assets: url = dev_config.get_asset_url("testdrive-jsui", asset) print(f" {asset} โ†’ {url}") print("\nProduction URLs:") for asset in sample_assets: url = prod_config.get_asset_url("testdrive-jsui", asset) print(f" {asset} โ†’ {url}") # Show JSON config generation print(f"\nDevelopment JSON config:") print(dev_config.to_json_config("testdrive-jsui")) def main(): """Run all demo workflows.""" print("๐ŸŽฏ TestDrive JSUI Plugin Integration Demo") print("๐Ÿ”ฌ Demonstrating JavaScript-first development approach") print("๐Ÿ—๏ธ Clean separation between Python and JavaScript\n") try: # Demo workflows engine = demo_standalone_development() rendering_manager = demo_plugin_discovery() output_dir = demo_production_deployment() demo_asset_url_generation() print(f"\nโœ… All demos completed successfully!") print(f"๐Ÿ”ฌ Standalone test: testdrive-jsui/test.html") print(f"๐Ÿ“„ Generated files in: {output_dir}") # Show next steps print(f"\n๐Ÿ“š Next Steps:") print(f" 1. Open testdrive-jsui/test.html in browser for standalone dev") print(f" 2. Start development server: cd testdrive-jsui && python -m http.server 8080") print(f" 3. Integrate with markitect md-render command") print(f" 4. Add more rendering engines to the plugin system") except Exception as e: print(f"โŒ Demo failed: {e}") import traceback traceback.print_exc() if __name__ == "__main__": main()