refactor: Major hyperscript refactoring and JS elimination
Inline Hyperscript Refactoring: - Body tag keyboard handlers: 20→8 lines (using helper functions) - Zoom control handlers: 85→35 lines (using zoom._hs) - PDF modal card selection: 90→6 lines (3 identical blocks eliminated) New Hyperscript Files: - zoom._hs: handleZoomInput, handleZoomReset, initZoomControl - pdf-modal._hs: selectPdfCard, handlePdfCardKey JavaScript Elimination (232 lines removed): - cv-functions.js: REMOVED - hyperscript defs are globally available - scroll-at-bottom-handler.js: REMOVED - duplicate of handleScroll() - footer-buttons-interaction.js: REMOVED - moved to hyperscript Added Tests: - 32-hyperscript-multi-src.test.mjs: Verifies multi-file loading - 33-keyboard-shortcuts-refactored.test.mjs: Keyboard shortcuts - 34-hyperscript-refactor-comprehensive.test.mjs: Full test suite Key Findings: - No hyperscript multi-file bug in 0.9.14 - Hyperscript def statements are globally accessible - Previous refactoring failures were syntax errors, not library bugs
This commit is contained in:
+31
-14
@@ -134,8 +134,9 @@ static/hyperscript/
|
||||
├── utils._hs → Core utilities (scroll, print, etc.)
|
||||
├── toggles._hs → Toggle functions (CV length, icons, theme)
|
||||
├── hover-sync._hs → Hover sync functions (PDF, print, zoom)
|
||||
├── navigation._hs → Navigation functions (scroll-to-section) [2025-11-20]
|
||||
└── keyboard._hs → Keyboard handler reference (inline in body tag)
|
||||
├── keyboard._hs → Keyboard shortcut helpers (handleToggleShortcut, openModalShortcut)
|
||||
├── zoom._hs → Zoom control helpers (handleZoomInput, handleZoomReset, initZoomControl)
|
||||
└── pdf-modal._hs → PDF modal helpers (selectPdfCard, handlePdfCardKey)
|
||||
```
|
||||
|
||||
### Load Order in templates/index.html:
|
||||
@@ -144,7 +145,8 @@ static/hyperscript/
|
||||
<script type="text/hyperscript" src="/static/hyperscript/toggles._hs"></script>
|
||||
<script type="text/hyperscript" src="/static/hyperscript/hover-sync._hs"></script>
|
||||
<script type="text/hyperscript" src="/static/hyperscript/keyboard._hs"></script>
|
||||
<script type="text/hyperscript" src="/static/hyperscript/navigation._hs"></script>
|
||||
<script type="text/hyperscript" src="/static/hyperscript/zoom._hs"></script>
|
||||
<script type="text/hyperscript" src="/static/hyperscript/pdf-modal._hs"></script>
|
||||
<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
|
||||
```
|
||||
|
||||
@@ -180,20 +182,20 @@ static/hyperscript/
|
||||
- Reduces HTML payload size
|
||||
- Cleaner separation of concerns
|
||||
|
||||
### Hyperscript 0.9.12 Limitation
|
||||
- Parser breaks with >3 `def` in single file
|
||||
- MUST split into multiple files
|
||||
- Each file: ≤3 `def` statements
|
||||
### Historical Note: Hyperscript Def Limit
|
||||
- **Hyperscript 0.9.12** had a 3-def limit per file (FIXED in 0.9.14+)
|
||||
- **Hyperscript 0.9.14+** has NO def limit - tested with 5+ defs
|
||||
- Multi-file organization is still recommended for maintainability, not required
|
||||
|
||||
## Common Mistakes to Avoid
|
||||
|
||||
❌ **DON'T**: Put all functions in one file if you have >3 defs
|
||||
❌ **DON'T**: Write long inline hyperscript in HTML
|
||||
❌ **DON'T**: Delete functions to work around the 3-def limit
|
||||
❌ **DON'T**: Write long inline hyperscript in HTML (maintainability issue)
|
||||
❌ **DON'T**: Try to externalize event handlers that inspect `event.key` or `event.target`
|
||||
❌ **DON'T**: Forget to test after refactoring (syntax errors look like bugs)
|
||||
|
||||
✅ **DO**: Split functions across multiple .\_hs files
|
||||
✅ **DO**: Split functions across multiple .\_hs files for organization
|
||||
✅ **DO**: Keep HTML clean with function calls
|
||||
✅ **DO**: Maintain all required functions for clean architecture
|
||||
✅ **DO**: Test all keyboard shortcuts after any hyperscript changes
|
||||
|
||||
## Testing After Changes
|
||||
|
||||
@@ -206,6 +208,21 @@ static/hyperscript/
|
||||
|
||||
## Recent Changes
|
||||
|
||||
### 2025-11-30: Major Inline Hyperscript Refactoring
|
||||
- ✅ **REFACTORED**: Body tag keyboard handlers → `keyboard._hs` helper functions
|
||||
- ✅ **REFACTORED**: Zoom control handlers → `zoom._hs` helper functions
|
||||
- ✅ **REFACTORED**: PDF modal card selection (3 identical blocks) → `pdf-modal._hs`
|
||||
- ✅ **ADDED**: `zoom._hs` - Zoom control helpers (handleZoomInput, handleZoomReset, initZoomControl)
|
||||
- ✅ **ADDED**: `pdf-modal._hs` - PDF modal helpers (selectPdfCard, handlePdfCardKey)
|
||||
- ✅ **TESTED**: All functionality verified with comprehensive tests
|
||||
|
||||
### 2025-11-30: Multi-File Loading Bug Investigation
|
||||
- ✅ **CONFIRMED**: Multiple `<script type="text/hyperscript" src="...">` tags work correctly
|
||||
- ✅ **VERIFIED**: No multi-file loading bug in hyperscript 0.9.14
|
||||
- ✅ **TESTED**: All 6 external files + inline hyperscript work together seamlessly
|
||||
- ✅ **ADDED**: Test `tests/mjs/32-hyperscript-multi-src.test.mjs` for verification
|
||||
- 🔍 **FINDING**: Previous refactoring failures were syntax errors, NOT hyperscript bugs
|
||||
|
||||
### 2025-11-20: Event Handler Externalization Guidelines
|
||||
- ✅ Added Rule 4: Clear guidelines on what can/cannot be externalized
|
||||
- ✅ Navigation handlers successfully externalized (9 links → 1 function)
|
||||
@@ -215,6 +232,6 @@ static/hyperscript/
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2025-11-20
|
||||
**Hyperscript Version**: 0.9.14+
|
||||
**Last Updated**: 2025-11-30
|
||||
**Hyperscript Version**: 0.9.14
|
||||
**Status**: MANDATORY - ALWAYS FOLLOW
|
||||
|
||||
Reference in New Issue
Block a user