# Hyperscript Development Rules ## MANDATORY RULES - ALWAYS FOLLOW ### Rule 1: Code Cleanliness **More than 3 lines of hyperscript → Move to function in file** - Inline hyperscript in HTML should be kept minimal (≤3 lines) - Longer logic MUST be extracted to named functions in .\_hs files - HTML templates should be clean and readable ### Rule 2: File Structure - Organized by Category **✅ NO def statement limit with latest hyperscript!** **HISTORICAL NOTE** (2025-11-17): Hyperscript 0.9.12 had a 3 def limit. Latest version REMOVED this limitation. - Test verification: `tests/mjs/9-hyperscript-def-limit.test.mjs` (all 5 def statements passed) - Migration in progress: Moving functions from JavaScript back to hyperscript **Current Best Practice**: Organize hyperscript functions by category in separate files ``` static/hyperscript/ ├── toggles._hs # Toggle functions (CV length, icons, theme) ├── hover-sync._hs # Hover synchronization functions ├── utils._hs # Utility functions (print, scroll, etc.) └── keyboard._hs # Keyboard shortcut handlers ``` **Benefits of Hyperscript Organization:** - ✅ Clean separation of concerns - ✅ Easy to locate and maintain functions - ✅ No artificial limitations - ✅ Server-side hypermedia pattern (functions loaded with HTML) - ✅ Still callable from anywhere using `call functionName(args)` ### Rule 3: HTML Structure Cleanliness **HTML must be as clean as possible regarding hyperscript** ✅ **GOOD** - Clean, readable: ```html ``` ❌ **BAD** - Inline logic nightmare: ```html ``` ### Rule 4: Event Handler Externalization Guidelines (2025-11-20) **Know what CAN and CANNOT be externalized** #### ✅ **CAN Be Externalized:** **Simple function calls without complex event inspection:** ```html