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:
juanatsap
2025-11-30 05:58:44 +00:00
parent 4a02c0a328
commit ba44b435e7
12 changed files with 841 additions and 266 deletions
+31 -14
View File
@@ -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