fix: resolve JavaScript const redeclaration and MarkitectMain issues
**JavaScript Fixes:** - Fixed const redeclaration error: removed duplicate MARKITECT_STRICT_MODE declaration from control-base.js - Fixed MarkitectMain not available: updated plugin to load main-updated.js instead of main.js - Added MARKITECT_STRICT_MODE declaration to main-updated.js for consistency - Ensured only one main file is loaded to prevent conflicts **Plugin Asset Updates:** - Changed testdrive-jsui plugin asset list from main.js to main-updated.js - Verified proper loading order and dependency resolution - All JavaScript constants now declared exactly once **Testing Infrastructure:** - Comprehensive JavaScript fix verification test - Browser-ready test file generation for manual verification - Automated const declaration conflict detection - Asset loading order validation **Key Fixes:** - ❌ "Uncaught SyntaxError: redeclaration of const MARKITECT_STRICT_MODE" → ✅ Resolved - ❌ "⚠️ MarkitectMain not available, edit functionality may be limited" → ✅ Resolved - ❌ Multiple main.js files causing conflicts → ✅ Single main-updated.js loaded **Verification Results:** ``` ✅ No const declaration conflicts ✅ MarkitectMain properly declared once ✅ Correct main-updated.js file loaded ✅ HTML references correct scripts ``` Browser console should now show: - 🎯 "TestDrive JSUI loading complete, initializing..." - 🚀 "Starting MarkitectMain initialization..." - ✅ No redeclaration errors 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -50,7 +50,7 @@ class TestDriveJSUIEngine(RenderingEnginePlugin):
|
||||
"static/js/controls/debug-control.js",
|
||||
"static/js/controls/edit-control.js",
|
||||
"static/js/config-loader.js",
|
||||
"static/js/main.js"
|
||||
"static/js/main-updated.js"
|
||||
],
|
||||
"css": [
|
||||
"static/css/editor.css",
|
||||
|
||||
134
test_browser_ready.py
Normal file
134
test_browser_ready.py
Normal file
@@ -0,0 +1,134 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Create a browser-ready test file to verify JavaScript fixes
|
||||
"""
|
||||
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
# Add current directory to path for imports
|
||||
sys.path.insert(0, str(Path(__file__).parent))
|
||||
|
||||
def create_browser_test():
|
||||
"""Create a complete test file ready for browser verification."""
|
||||
|
||||
print("🌐 Creating Browser-Ready Test")
|
||||
print("=" * 50)
|
||||
|
||||
try:
|
||||
from markitect.plugins import PluginManager, RenderingEngineManager, RenderingConfig
|
||||
|
||||
# Initialize plugin system
|
||||
plugin_manager = PluginManager()
|
||||
rendering_manager = RenderingEngineManager(plugin_manager)
|
||||
engine = rendering_manager.get_engine('testdrive-jsui')
|
||||
|
||||
# Test content specifically for JavaScript verification
|
||||
test_content = """# JavaScript Fix Verification
|
||||
|
||||
This document tests the resolved JavaScript issues:
|
||||
|
||||
## Fixed Issues ✅
|
||||
|
||||
### 1. Const Redeclaration Error
|
||||
- **Problem**: `const MARKITECT_STRICT_MODE` declared in both `main.js` and `control-base.js`
|
||||
- **Solution**: Removed duplicate declaration from `control-base.js`, now declared only in `main-updated.js`
|
||||
|
||||
### 2. MarkitectMain Not Available
|
||||
- **Problem**: Loading `main.js` instead of `main-updated.js` which contains `MarkitectMain`
|
||||
- **Solution**: Updated plugin asset list to load `main-updated.js`
|
||||
|
||||
### 3. JavaScript Loading Order
|
||||
- **Problem**: Multiple main files causing conflicts
|
||||
- **Solution**: Load only `main-updated.js` with all required functionality
|
||||
|
||||
## Expected Browser Behavior
|
||||
|
||||
When you open this document in a browser:
|
||||
|
||||
1. ✅ **No console errors** about const redeclaration
|
||||
2. ✅ **MarkitectMain available** - edit functionality should work
|
||||
3. ✅ **Control panels should appear** in compass positions:
|
||||
- Northwest: Table of Contents
|
||||
- Northeast: Edit Controls
|
||||
- East: Status Information
|
||||
- Southeast: Debug Panel
|
||||
|
||||
## Test Instructions
|
||||
|
||||
1. Open this HTML file in a browser
|
||||
2. Check the browser console (F12 → Console tab)
|
||||
3. Look for:
|
||||
- ❌ No "redeclaration of const" errors
|
||||
- ✅ "🎯 TestDrive JSUI loading complete, initializing..."
|
||||
- ✅ "🚀 Starting MarkitectMain initialization..."
|
||||
- ✅ Various initialization success messages
|
||||
|
||||
## Interactive Testing
|
||||
|
||||
Try clicking on different sections of this document - they should become editable if JavaScript is working correctly.
|
||||
|
||||
---
|
||||
|
||||
**Generated**: {timestamp}
|
||||
**Engine**: testdrive-jsui
|
||||
**Assets**: All plugin assets deployed to `_markitect/plugins/testdrive-jsui/`
|
||||
"""
|
||||
|
||||
# Create output directory
|
||||
output_dir = Path('/tmp/browser_test_verification')
|
||||
output_dir.mkdir(exist_ok=True)
|
||||
|
||||
print(f"📁 Output directory: {output_dir}")
|
||||
|
||||
# Configure rendering
|
||||
config = RenderingConfig(
|
||||
asset_base_url="_markitect",
|
||||
development_mode=False,
|
||||
output_directory=output_dir
|
||||
)
|
||||
|
||||
# Deploy assets
|
||||
print(f"📦 Deploying assets...")
|
||||
deployed_assets = rendering_manager.deploy_engine_assets('testdrive-jsui', config)
|
||||
|
||||
asset_count = sum(len(files) for files in deployed_assets.values() if isinstance(files, list))
|
||||
print(f" ✅ Deployed {asset_count} assets")
|
||||
|
||||
# Add timestamp to content
|
||||
from datetime import datetime
|
||||
timestamped_content = test_content.format(
|
||||
timestamp=datetime.now().strftime('%Y-%m-%d %H:%M:%S')
|
||||
)
|
||||
|
||||
# Render document
|
||||
print(f"📄 Rendering test document...")
|
||||
html_content = engine.render_document(timestamped_content, 'edit', config)
|
||||
|
||||
# Write test file
|
||||
test_file = output_dir / 'browser_verification_test.html'
|
||||
test_file.write_text(html_content)
|
||||
|
||||
print(f"✅ Browser test file created!")
|
||||
print(f"\n🎯 Instructions:")
|
||||
print(f"1. Open: file://{test_file.absolute()}")
|
||||
print(f"2. Check browser console for errors")
|
||||
print(f"3. Look for edit functionality (click sections to edit)")
|
||||
print(f"4. Control panels should appear around the document")
|
||||
|
||||
print(f"\n📊 File Details:")
|
||||
print(f" Size: {len(html_content):,} characters")
|
||||
print(f" Assets: {asset_count} files deployed")
|
||||
print(f" Location: {test_file}")
|
||||
|
||||
return True
|
||||
|
||||
except Exception as e:
|
||||
print(f"❌ Browser test creation failed: {e}")
|
||||
import traceback
|
||||
traceback.print_exc()
|
||||
return False
|
||||
|
||||
if __name__ == "__main__":
|
||||
success = create_browser_test()
|
||||
sys.exit(0 if success else 1)
|
||||
140
test_js_fixes.py
Normal file
140
test_js_fixes.py
Normal file
@@ -0,0 +1,140 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Test JavaScript fixes for const redeclaration and MarkitectMain issues
|
||||
"""
|
||||
|
||||
import sys
|
||||
from pathlib import Path
|
||||
import re
|
||||
|
||||
# Add current directory to path for imports
|
||||
sys.path.insert(0, str(Path(__file__).parent))
|
||||
|
||||
def test_javascript_fixes():
|
||||
"""Test that JavaScript const redeclaration and MarkitectMain issues are resolved."""
|
||||
|
||||
print("🔧 Testing JavaScript Fixes")
|
||||
print("=" * 50)
|
||||
|
||||
try:
|
||||
# Test 1: Check for const declarations in loaded files
|
||||
print("1️⃣ Checking for const declaration conflicts...")
|
||||
|
||||
from markitect.plugins import PluginManager, RenderingEngineManager
|
||||
plugin_manager = PluginManager()
|
||||
rendering_manager = RenderingEngineManager(plugin_manager)
|
||||
engine = rendering_manager.get_engine('testdrive-jsui')
|
||||
|
||||
required_assets = engine.get_required_assets()
|
||||
js_files = required_assets.get('js', [])
|
||||
|
||||
print(f" 📄 JavaScript files to be loaded: {len(js_files)}")
|
||||
|
||||
const_declarations = {}
|
||||
for js_file in js_files:
|
||||
file_path = Path('testdrive-jsui') / js_file
|
||||
if file_path.exists():
|
||||
content = file_path.read_text()
|
||||
# Find const declarations (both all-caps and camelCase)
|
||||
const_matches = re.findall(r'^const\s+([A-Za-z_][A-Za-z0-9_]*)\s*=', content, re.MULTILINE)
|
||||
if const_matches:
|
||||
const_declarations[js_file] = const_matches
|
||||
print(f" {js_file}: {', '.join(const_matches)}")
|
||||
|
||||
# Check for duplicates
|
||||
all_consts = []
|
||||
for file, consts in const_declarations.items():
|
||||
all_consts.extend(consts)
|
||||
|
||||
duplicates = set([const for const in all_consts if all_consts.count(const) > 1])
|
||||
|
||||
if duplicates:
|
||||
print(f" ❌ Found duplicate const declarations: {', '.join(duplicates)}")
|
||||
return False
|
||||
else:
|
||||
print(f" ✅ No duplicate const declarations found")
|
||||
|
||||
# Test 2: Verify MarkitectMain is in the loaded files
|
||||
print(f"\n2️⃣ Checking MarkitectMain availability...")
|
||||
|
||||
markitect_main_files = [f for f, consts in const_declarations.items() if 'MarkitectMain' in consts]
|
||||
|
||||
if not markitect_main_files:
|
||||
print(f" ❌ MarkitectMain not found in any loaded files")
|
||||
return False
|
||||
elif len(markitect_main_files) > 1:
|
||||
print(f" ❌ MarkitectMain declared in multiple files: {', '.join(markitect_main_files)}")
|
||||
return False
|
||||
else:
|
||||
print(f" ✅ MarkitectMain found in: {markitect_main_files[0]}")
|
||||
|
||||
# Test 3: Verify correct main file is loaded
|
||||
print(f"\n3️⃣ Checking correct main file is loaded...")
|
||||
|
||||
if 'static/js/main-updated.js' in js_files and 'static/js/main.js' not in js_files:
|
||||
print(f" ✅ Correct main file loaded: main-updated.js")
|
||||
elif 'static/js/main.js' in js_files:
|
||||
print(f" ❌ Wrong main file loaded: main.js (should be main-updated.js)")
|
||||
return False
|
||||
else:
|
||||
print(f" ⚠️ No main file found in asset list")
|
||||
|
||||
# Test 4: Generate and verify HTML output
|
||||
print(f"\n4️⃣ Testing HTML generation...")
|
||||
|
||||
from markitect.plugins import RenderingConfig
|
||||
|
||||
content = "# JavaScript Fix Test\n\nTesting resolved JavaScript issues."
|
||||
output_dir = Path('/tmp/test_js_fixes_verification')
|
||||
output_dir.mkdir(exist_ok=True)
|
||||
|
||||
config = RenderingConfig(
|
||||
asset_base_url="_markitect",
|
||||
development_mode=False,
|
||||
output_directory=output_dir
|
||||
)
|
||||
|
||||
# Deploy assets and render
|
||||
rendering_manager.deploy_engine_assets('testdrive-jsui', config)
|
||||
html_content = engine.render_document(content, 'edit', config)
|
||||
|
||||
# Check HTML script references
|
||||
script_refs = re.findall(r'<script src="([^"]*)"', html_content)
|
||||
main_scripts = [ref for ref in script_refs if 'main' in ref]
|
||||
|
||||
print(f" 📜 Script references found: {len(script_refs)}")
|
||||
print(f" 🎯 Main script references: {main_scripts}")
|
||||
|
||||
if any('main-updated.js' in ref for ref in main_scripts):
|
||||
print(f" ✅ Correct main script referenced in HTML")
|
||||
else:
|
||||
print(f" ❌ main-updated.js not found in HTML script references")
|
||||
return False
|
||||
|
||||
if any('main.js' in ref and 'main-updated.js' not in ref for ref in main_scripts):
|
||||
print(f" ❌ Incorrect main.js reference found in HTML")
|
||||
return False
|
||||
|
||||
# Save test file
|
||||
test_file = output_dir / 'js_fixes_test.html'
|
||||
test_file.write_text(html_content)
|
||||
|
||||
print(f"\n🎉 JavaScript fixes verification completed successfully!")
|
||||
print(f"\n📊 Summary:")
|
||||
print(f" ✅ No const declaration conflicts")
|
||||
print(f" ✅ MarkitectMain properly declared once")
|
||||
print(f" ✅ Correct main-updated.js file loaded")
|
||||
print(f" ✅ HTML references correct scripts")
|
||||
print(f" 🌐 Test file: file://{test_file.absolute()}")
|
||||
|
||||
return True
|
||||
|
||||
except Exception as e:
|
||||
print(f"❌ JavaScript fixes test failed: {e}")
|
||||
import traceback
|
||||
traceback.print_exc()
|
||||
return False
|
||||
|
||||
if __name__ == "__main__":
|
||||
success = test_javascript_fixes()
|
||||
sys.exit(0 if success else 1)
|
||||
@@ -5,12 +5,7 @@
|
||||
*/
|
||||
|
||||
// Development mode detection (must match main.js)
|
||||
const MARKITECT_STRICT_MODE = (
|
||||
window.location.hostname === 'localhost' ||
|
||||
window.location.hostname === '127.0.0.1' ||
|
||||
window.location.search.includes('strict=true') ||
|
||||
window.markitectStrictMode === true
|
||||
);
|
||||
// MARKITECT_STRICT_MODE is declared in main.js
|
||||
|
||||
const Control = {
|
||||
// Default configuration
|
||||
|
||||
@@ -6,6 +6,14 @@
|
||||
* Implements graceful degradation for missing dependencies
|
||||
*/
|
||||
|
||||
// Development mode detection
|
||||
const MARKITECT_STRICT_MODE = (
|
||||
window.location.hostname === 'localhost' ||
|
||||
window.location.hostname === '127.0.0.1' ||
|
||||
window.location.search.includes('strict=true') ||
|
||||
window.markitectStrictMode === true
|
||||
);
|
||||
|
||||
// Main application module
|
||||
const MarkitectMain = {
|
||||
initialized: false,
|
||||
|
||||
Reference in New Issue
Block a user