feat: implement JavaScript-first TestDriveJSUI library (v1.0.0)

Completed Phase 1 refactoring to JavaScript-first architecture: Core Library Implementation: - Created js/testdrive-jsui.js main library class - Integrated all existing components (SectionManager, DOMRenderer, DocumentControls) - Added marked.js integration for markdown rendering - Implemented event-driven API (on/off/emit) - Support for edit/view modes and themes - LocalStorage save/load functionality - Download as markdown file - Keyboard shortcuts (Ctrl+S, Escape) - Auto-save capability (optional) Examples: - examples/full-editor.html - Complete demo with all features - Updated examples/README.md with full documentation Documentation: - Updated README.md with JavaScript-first architecture section - Added complete API reference (constructor, methods, events) - Updated CLAUDE.md with library quick start and API - Emphasized JavaScript-first design principles Architecture: - JavaScript provides ALL functionality - Language adapters are optional integration helpers - Works standalone in browser (no backend required) - Clean separation: JS (functionality) vs Adapters (integration) This completes the architectural shift documented in ARCHITECTURE.md and JS_FIRST_REFACTORING.md Phase 1. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-16 12:14:58 +01:00
parent b84770e2d3
commit 796c04709a
5 changed files with 1424 additions and 58 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -4,10 +4,70 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co

 ## Overview

-TestDrive-JSUI is a standalone JavaScript UI rendering engine and testing framework. It's designed as an independent, reusable capability that provides:
- Interactive JavaScript UI for markdown editing/viewing
- Python-JavaScript test integration bridge
- Self-contained plugin architecture with no hardcoded paths
+**TestDrive-JSUI is a JavaScript-first markdown editor library.**
+
+This is a pure JavaScript library for interactive markdown editing that works standalone in any browser. Language adapters (Python, Ruby, Java) are **optional integration helpers** - they do NOT provide core functionality.
+
+**Key Facts**:
+- **Core:** Complete JavaScript library (`js/testdrive-jsui.js`)
+- **Dependencies:** Only marked.js for markdown parsing
+- **Standalone:** Works without any backend (can run from file://)
+- **Optional Adapters:** Python/Ruby/Java adapters help with asset serving and backend integration
+- **Architecture:** JavaScript-first design (see `ARCHITECTURE.md`)
+
+## JavaScript Library
+
+### Quick Start
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="js/testdrive-jsui.js"></script>
+</head>
+<body>
+    <div id="editor"></div>
+    <script>
+        const editor = new TestDriveJSUI({
+            container: '#editor',
+            markdown: '# Hello World\n\nEdit me!',
+            mode: 'edit',
+            theme: 'github'
+        });
+    </script>
+</body>
+</html>
+```
+
+### API
+
+**Constructor Options:**
+- `container` (required): CSS selector or DOM element
+- `markdown`: Initial content
+- `mode`: 'edit' or 'view' (default: 'edit')
+- `theme`: Theme name (default: 'github')
+- `autosave`: Auto-save enabled (default: false)
+- `shortcuts`: Keyboard shortcuts (default: true)
+- `sections`: Section-based editing (default: true)
+- `debug`: Debug mode (default: false)
+
+**Methods:**
+- `getMarkdown()`: Get current content
+- `setMarkdown(markdown)`: Set content
+- `getStatus()`: Get editor status
+- `save()`: Trigger save event
+- `download(filename)`: Download as .md file
+- `on(event, callback)`: Listen to events
+- `destroy()`: Clean up
+
+**Events:** `initialized`, `save`, `content-changed`, `autosave`, `download`, `reset`, `destroyed`
+
+### Examples
+
+See `/examples`:
+- `standalone.html` - Minimal proof of concept
+- `full-editor.html` - Complete demo with all features

 ## Migration Status

@@ -88,38 +148,55 @@ make testdrive-jsui-clean
 ### Directory Structure
 ```
 testdrive-jsui/
-├── src/testdrive_jsui/          # Python package
-│   ├── core/                    # Core framework components
-│   ├── components/              # UI component helpers
-│   ├── utils/                   # Utility functions
-│   └── testing/                 # Python-JS bridge
-│       ├── js_test_runner.py    # JavaScript test execution
-│       └── integration.py       # Pytest integration
-├── js/                          # JavaScript source (consolidated)
+├── js/                          # JavaScript library (Core functionality)
+│   ├── testdrive-jsui.js        # 🎯 Main library entry point
 │   ├── core/                    # Core JS: debug-system, section-manager
-│   ├── components/              # UI components: dom-renderer, debug-panel
+│   ├── components/              # UI components: dom-renderer, debug-panel, document-controls
 │   ├── controls/                # Control panels: edit, debug, status, contents
 │   ├── plugins/                 # JS plugins
 │   ├── widgets/                 # UI widgets
 │   ├── utils/                   # JS utilities
-│   ├── tests/                   # JavaScript tests
+│   ├── tests/                   # JavaScript tests (Jest)
 │   ├── config-loader.js         # Configuration loader
-│   ├── main.js                  # Original main entry point
+│   ├── main.js                  # Legacy main entry point
 │   └── main-updated.js          # Refactored main entry
+├── examples/                    # 📚 Working examples
+│   ├── standalone.html          # Minimal proof of concept
+│   └── full-editor.html         # Complete demo
+├── src/testdrive_jsui/          # Python adapter (optional)
+│   ├── core/                    # Adapter core
+│   ├── components/              # Adapter helpers
+│   ├── utils/                   # Utilities
+│   └── testing/                 # Python-JS bridge
+│       ├── js_test_runner.py    # JavaScript test execution
+│       └── integration.py       # Pytest integration
 ├── static/                      # Static assets
 │   ├── css/                     # Stylesheets (editor, controls, themes)
 │   ├── images/                  # Image assets and icons
-│   └── templates/               # HTML templates (index.html)
-└── tests/                       # Python tests
+│   └── templates/               # HTML templates
+├── tests/                       # Python tests
+├── docs/                        # Documentation
+│   ├── prototypes/              # Archived HTML prototypes
+│   └── migration/               # Migration records
+├── ARCHITECTURE.md              # JavaScript-first architecture details
+└── README.md                    # Main documentation
 ```

 ### Key Design Principles

+**JavaScript-First Architecture** (NEW in v1.0.0)
+- **Core functionality in JavaScript**: All UI logic, rendering, and editing in JS
+- **Standalone capable**: Works without any backend (can run from file://)
+- **marked.js only dependency**: For markdown parsing
+- **Language adapters optional**: Python/Ruby/Java are integration helpers, not functionality providers
+- **Event-driven API**: Clean event system for integration
+- **See `ARCHITECTURE.md`** for complete architectural documentation
+
 **Plugin Independence**
 - **Self-declaring**: Plugin declares its own location - no hardcoded paths needed
 - **Single source of truth**: All assets in one capability directory
- **Clean boundaries**: JSON config interface between Python and JavaScript
- **No code mixing**: JavaScript stays in `.js` files, never embedded in Python strings
+- **Clean boundaries**: JSON config interface between adapters and JavaScript
+- **No code mixing**: JavaScript stays in `.js` files, never embedded in strings
 - Works regardless of installation location

 **Testing Architecture**