generated from coulomb/repo-seed
tegwick
796c04709a
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>
206 lines
5.1 KiB
Markdown
206 lines
5.1 KiB
Markdown
# TestDrive-JSUI Examples
|
|
|
|
This directory contains examples demonstrating TestDrive-JSUI as a standalone JavaScript library.
|
|
|
|
---
|
|
|
|
## 📁 Examples
|
|
|
|
### `standalone.html` - Proof of Concept
|
|
|
|
**Purpose**: Minimal proof that TestDrive-JSUI can work as a pure JavaScript library.
|
|
|
|
**Features**:
|
|
- ✅ Runs directly in browser (no server needed)
|
|
- ✅ Markdown rendering using marked.js
|
|
- ✅ Save/load to browser localStorage
|
|
- ✅ Download markdown files
|
|
- ✅ Zero dependencies on Python/Ruby/Java
|
|
|
|
**How to Use**:
|
|
```bash
|
|
# Option 1: Open directly in browser
|
|
open examples/standalone.html
|
|
|
|
# Option 2: From file system (works!)
|
|
# Just double-click the file
|
|
|
|
# Option 3: Serve with any static server
|
|
python3 -m http.server 8000
|
|
# Then visit: http://localhost:8000/examples/standalone.html
|
|
```
|
|
|
|
**What It Demonstrates**:
|
|
- JavaScript can handle all rendering
|
|
- No backend is required for core functionality
|
|
- Language adapters (Python/Ruby/Java) are truly optional
|
|
|
|
---
|
|
|
|
### `full-editor.html` - Complete Library Demo
|
|
|
|
**Purpose**: Demonstrates the full TestDriveJSUI library with all features.
|
|
|
|
**Features**:
|
|
- ✅ **Full Library Integration**: Uses complete `TestDriveJSUI` class
|
|
- ✅ **Section-Based Editing**: Click sections to edit them independently
|
|
- ✅ **Interactive Controls**: Floating control panel with document operations
|
|
- ✅ **Event System**: Listen to save, content-changed, and other events
|
|
- ✅ **Multiple Modes**: Switch between edit and view modes
|
|
- ✅ **Auto-save**: Optional automatic saving (currently disabled)
|
|
- ✅ **Keyboard Shortcuts**: Ctrl+S to save, Escape to close editor
|
|
- ✅ **Status Bar**: Real-time document statistics
|
|
- ✅ **Image Editing**: Advanced image editing with drag & drop
|
|
|
|
**How to Use**:
|
|
```bash
|
|
# Serve with any static server (required for proper module loading)
|
|
python3 -m http.server 8000
|
|
# Then visit: http://localhost:8000/examples/full-editor.html
|
|
```
|
|
|
|
**What It Demonstrates**:
|
|
- Complete TestDriveJSUI API usage
|
|
- Integration of all components (SectionManager, DOMRenderer, DocumentControls)
|
|
- Event-driven architecture
|
|
- Mode switching (edit/view)
|
|
- Document operations (save, load, download, reset)
|
|
- Real-time status updates
|
|
|
|
**API Example from Demo**:
|
|
```javascript
|
|
// Initialize editor
|
|
const editor = new TestDriveJSUI({
|
|
container: '#editor-container',
|
|
markdown: '# Hello World',
|
|
mode: 'edit',
|
|
theme: 'github',
|
|
autosave: false,
|
|
shortcuts: true
|
|
});
|
|
|
|
// Listen to events
|
|
editor.on('save', (data) => {
|
|
console.log('Saved:', data.markdown);
|
|
});
|
|
|
|
// Get/set content
|
|
const markdown = editor.getMarkdown();
|
|
editor.setMarkdown('# Updated content');
|
|
|
|
// Get status
|
|
const status = editor.getStatus();
|
|
console.log('Sections:', status.totalSections);
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Architecture Validation
|
|
|
|
These examples validate the JavaScript-first architecture:
|
|
|
|
### ✅ Implemented Features
|
|
- Markdown parsing (marked.js)
|
|
- HTML rendering
|
|
- UI display and styling
|
|
- Content management
|
|
- Save/load (localStorage)
|
|
- File download
|
|
- **Interactive editing UI** ✅
|
|
- **Section-based editing** ✅
|
|
- **Control panels (edit, debug, status)** ✅
|
|
- **Keyboard shortcuts** ✅
|
|
- **Themes** ✅
|
|
- **Event system** ✅
|
|
|
|
### 🚧 Future Enhancements
|
|
- Plugin system
|
|
- Additional themes
|
|
- Collaborative editing
|
|
- Cloud storage adapters
|
|
- Mobile-optimized UI
|
|
|
|
### 🔧 What Backend Adapters Provide (Optional)
|
|
- Asset serving at scale
|
|
- Server-side storage
|
|
- User authentication
|
|
- Multi-user collaboration
|
|
- Testing infrastructure
|
|
|
|
---
|
|
|
|
## 🚀 Getting Started
|
|
|
|
### 1. Try the Proof of Concept
|
|
```bash
|
|
# Open standalone.html in any browser
|
|
open examples/standalone.html
|
|
|
|
# Test basic functionality:
|
|
# - Markdown rendering
|
|
# - Save/load/download buttons
|
|
```
|
|
|
|
### 2. Explore the Full Editor
|
|
```bash
|
|
# Serve the examples directory
|
|
cd examples
|
|
python3 -m http.server 8000
|
|
|
|
# Open in browser:
|
|
# http://localhost:8000/full-editor.html
|
|
|
|
# Test advanced features:
|
|
# - Click sections to edit
|
|
# - Use toolbar buttons
|
|
# - Try keyboard shortcuts (Ctrl+S, Escape)
|
|
# - Switch between edit/view modes
|
|
```
|
|
|
|
### 3. Integrate Into Your Project
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="path/to/testdrive-jsui.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="editor"></div>
|
|
<script>
|
|
const editor = new TestDriveJSUI({
|
|
container: '#editor',
|
|
markdown: '# Start writing...',
|
|
mode: 'edit'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 Notes
|
|
|
|
**Performance**: Loading from CDN (marked.js) means internet connection required. For fully offline use, download marked.js locally.
|
|
|
|
**Browser Support**: Works in all modern browsers (Chrome, Firefox, Safari, Edge). Requires ES6 support.
|
|
|
|
**File Size**: The standalone example loads individual JS files. Production version would use bundled `testdrive-jsui.min.js` (~50KB).
|
|
|
|
---
|
|
|
|
## 🤝 Contributing Examples
|
|
|
|
Want to add an example? Please ensure it:
|
|
1. Works standalone (no complex build required)
|
|
2. Demonstrates a specific use case
|
|
3. Includes inline documentation
|
|
4. Works by just opening in browser
|
|
|
|
---
|
|
|
|
**Status**: Full Implementation Complete ✅
|
|
**Last Updated**: 2025-12-16
|
|
**Library Version**: 1.0.0
|