feat: consolidate testdrive-jsui to capabilities and implement plugin self-declaration
## Major Changes - Moved all testdrive-jsui assets from root to capabilities/testdrive-jsui/ - Consolidated directory structure: js/, static/css/, static/images/, static/templates/ - Implemented plugin self-declaration (get_plugin_source_dir, get_asset_paths) - Removed hardcoded plugin discovery from rendering.py - Updated all asset paths to be relative to capability root ## Architecture Improvements - Single source of truth for all testdrive-jsui assets - Plugin declares its own location (no hardcoded paths) - Generic plugin discovery using hasattr check - Clean separation: all JS in .js files, no code mixing - Standalone capability ready for independent use ## Files Changed - markitect/plugins/testdrive_jsui.py: Added self-declaration methods - markitect/plugins/rendering.py: Removed hardcoded discovery - capabilities/testdrive-jsui/README.md: Added standalone usage documentation - Moved 17 asset files to consolidated structure - Deleted obsolete /testdrive-jsui/ root directory ## Testing - All 17 assets verified and working - Tested via CLI: markitect md-render --engine testdrive-jsui - Full document rendering successful Prepares testdrive-jsui to become a git submodule with proper dependency management. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,21 +1,23 @@
|
||||
# TestDrive-JSUI Capability
|
||||
# TestDrive-JSUI
|
||||
|
||||
A comprehensive JavaScript UI testing framework capability for MarkiTect. Provides seamless integration between Python and JavaScript testing environments, enabling safe development and testing of JavaScript UI components.
|
||||
A standalone JavaScript UI rendering engine and testing framework. Originally developed for MarkiTect, TestDrive-JSUI is designed as an independent, reusable capability that can be integrated into any Python project.
|
||||
|
||||
## 🎯 **Purpose**
|
||||
|
||||
TestDrive-JSUI is designed to:
|
||||
|
||||
- **📝 Render markdown with interactive JavaScript UI** for editing and viewing
|
||||
- **🔌 Work as a standalone plugin** or integrate with any Python project
|
||||
- **🔒 Protect existing JavaScript UI functionality** during refactoring and development
|
||||
- **🧪 Integrate JavaScript tests** into the main Python test suite
|
||||
- **🧪 Integrate JavaScript tests** into Python test suites
|
||||
- **🏗️ Provide a clean architecture** for JavaScript framework development
|
||||
- **📊 Enable comprehensive testing** of JavaScript UI components
|
||||
- **🚀 Support future extensibility** for JavaScript framework evolution
|
||||
- **🚀 Support extensibility** for JavaScript framework evolution
|
||||
|
||||
## 🏗️ **Architecture**
|
||||
|
||||
```
|
||||
testdrive-jsui/
|
||||
capabilities/testdrive-jsui/
|
||||
├── src/testdrive_jsui/ # Python package
|
||||
│ ├── core/ # Core framework components
|
||||
│ ├── components/ # UI component helpers
|
||||
@@ -23,11 +25,26 @@ testdrive-jsui/
|
||||
│ └── testing/ # Python-JS bridge
|
||||
│ ├── js_test_runner.py # JavaScript test execution
|
||||
│ └── integration.py # Pytest integration
|
||||
├── js/ # JavaScript source
|
||||
│ ├── core/ # Core JS components
|
||||
│ ├── components/ # UI components
|
||||
├── js/ # JavaScript source (consolidated)
|
||||
│ ├── core/ # Core JS (debug-system, section-manager)
|
||||
│ ├── components/ # UI components (dom-renderer, debug-panel)
|
||||
│ ├── controls/ # Control panels (edit, debug, status, contents)
|
||||
│ ├── plugins/ # JS plugins
|
||||
│ ├── widgets/ # UI widgets
|
||||
│ ├── utils/ # JS utilities
|
||||
│ └── tests/ # JavaScript tests
|
||||
│ ├── tests/ # JavaScript tests
|
||||
│ ├── config-loader.js # Configuration loader
|
||||
│ ├── main.js # Main entry point
|
||||
│ └── main-updated.js # Updated main (refactored)
|
||||
├── static/ # Static assets
|
||||
│ ├── css/ # Stylesheets
|
||||
│ │ ├── editor.css # Editor styles
|
||||
│ │ ├── controls.css # Control panel styles
|
||||
│ │ └── themes/ # Theme files
|
||||
│ ├── images/ # Image assets
|
||||
│ │ └── icons/ # UI icons
|
||||
│ └── templates/ # HTML templates
|
||||
│ └── index.html # Main template
|
||||
├── tests/ # Python tests
|
||||
├── Makefile # Capability commands
|
||||
├── pyproject.toml # Python package config
|
||||
@@ -35,15 +52,40 @@ testdrive-jsui/
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
**Key Design Principles:**
|
||||
|
||||
- **Single Source of Truth**: All assets in one capability directory
|
||||
- **Self-Declaration**: Plugin declares its own paths (no hardcoded discovery)
|
||||
- **Clean Boundaries**: JSON config interface between Python and JavaScript
|
||||
- **No Code Mixing**: JavaScript stays in `.js` files, never embedded in Python
|
||||
- **Plugin Independence**: Can be moved/installed anywhere
|
||||
|
||||
## 🚀 **Quick Start**
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- **Python 3.8+** with pip
|
||||
- **Node.js 16+** with npm
|
||||
- **MarkiTect main project** installed
|
||||
- **Node.js 16+** with npm (optional, for JavaScript testing)
|
||||
|
||||
### Installation
|
||||
### Standalone Installation
|
||||
|
||||
TestDrive-JSUI can be used completely independently of MarkiTect:
|
||||
|
||||
```bash
|
||||
# Clone or copy this directory
|
||||
git clone <repo-url> testdrive-jsui
|
||||
cd testdrive-jsui
|
||||
|
||||
# Install Python package in development mode
|
||||
pip install -e .
|
||||
|
||||
# (Optional) Install JavaScript dependencies for testing
|
||||
npm install
|
||||
```
|
||||
|
||||
### Integration with MarkiTect
|
||||
|
||||
If using within the MarkiTect project:
|
||||
|
||||
```bash
|
||||
# Navigate to the capability directory
|
||||
@@ -58,6 +100,115 @@ make testdrive-jsui-status # Check environment
|
||||
make testdrive-jsui-test-all # Run all tests
|
||||
```
|
||||
|
||||
## 📦 **Standalone Usage**
|
||||
|
||||
### As a Rendering Engine Plugin
|
||||
|
||||
TestDrive-JSUI implements a plugin interface that allows it to be used independently:
|
||||
|
||||
```python
|
||||
from pathlib import Path
|
||||
from testdrive_jsui import TestDriveJSUIEngine
|
||||
|
||||
# Create engine instance
|
||||
engine = TestDriveJSUIEngine()
|
||||
|
||||
# The engine declares its own location - no hardcoded paths!
|
||||
source_dir = engine.get_plugin_source_dir()
|
||||
print(f"Plugin located at: {source_dir}")
|
||||
|
||||
# Get organized asset paths
|
||||
asset_paths = engine.get_asset_paths()
|
||||
# Returns: {'js': Path(...), 'css': Path(...), 'images': Path(...), 'templates': Path(...)}
|
||||
|
||||
# Get required assets list
|
||||
assets = engine.get_required_assets()
|
||||
# Returns: {'js': [...], 'css': [...], 'images': [...], 'external': [...]}
|
||||
```
|
||||
|
||||
### Rendering Documents
|
||||
|
||||
Use the engine to render markdown content with an interactive JavaScript UI:
|
||||
|
||||
```python
|
||||
from testdrive_jsui import TestDriveJSUIEngine
|
||||
from markitect.plugins.rendering import RenderingConfig
|
||||
from pathlib import Path
|
||||
|
||||
# Create engine
|
||||
engine = TestDriveJSUIEngine()
|
||||
|
||||
# Configure for development (serves from source)
|
||||
config = RenderingConfig(
|
||||
asset_base_url='.',
|
||||
development_mode=True,
|
||||
plugin_source_dirs={'testdrive-jsui': engine.get_plugin_source_dir()}
|
||||
)
|
||||
|
||||
# Render markdown content
|
||||
markdown_content = """
|
||||
# My Document
|
||||
|
||||
This is a test of the **TestDrive-JSUI** rendering engine.
|
||||
|
||||
## Features
|
||||
- Interactive editing
|
||||
- Section management
|
||||
- Debug controls
|
||||
"""
|
||||
|
||||
html = engine.render_document(markdown_content, 'edit', config)
|
||||
|
||||
# Save to file
|
||||
Path('output.html').write_text(html)
|
||||
print("✅ Rendered to output.html")
|
||||
```
|
||||
|
||||
### Production Deployment
|
||||
|
||||
For production, deploy assets to a static directory:
|
||||
|
||||
```python
|
||||
from testdrive_jsui import TestDriveJSUIEngine
|
||||
from markitect.plugins.rendering import RenderingConfig
|
||||
from pathlib import Path
|
||||
|
||||
engine = TestDriveJSUIEngine()
|
||||
|
||||
# Configure for production
|
||||
config = RenderingConfig(
|
||||
asset_base_url='/_static',
|
||||
development_mode=False,
|
||||
output_directory=Path('./dist')
|
||||
)
|
||||
|
||||
# Assets will be copied to: dist/_static/plugins/testdrive-jsui/
|
||||
html = engine.render_document(content, 'view', config)
|
||||
```
|
||||
|
||||
### Plugin Independence
|
||||
|
||||
TestDrive-JSUI is designed to be fully independent:
|
||||
|
||||
- ✅ **Self-contained**: All assets in one directory
|
||||
- ✅ **Self-declaring**: Plugin declares its own location
|
||||
- ✅ **No hardcoded paths**: Works regardless of installation location
|
||||
- ✅ **Clean interface**: Pure JSON configuration boundary
|
||||
- ✅ **No JavaScript in Python**: All JS in separate files
|
||||
- ✅ **Reusable**: Can be used in any Python project
|
||||
|
||||
### Supported Modes
|
||||
|
||||
```python
|
||||
# Check supported rendering modes
|
||||
modes = engine.get_supported_modes()
|
||||
# Returns: ['edit', 'view']
|
||||
|
||||
# Validate a mode
|
||||
if engine.validate_mode('edit'):
|
||||
html = engine.render_document(content, 'edit', config)
|
||||
```
|
||||
|
||||
## 🧪 **Testing**
|
||||
|
||||
### JavaScript Tests
|
||||
|
||||
Reference in New Issue
Block a user