Enhance migration templates with critical omission prevention

Add comprehensive guidance to prevent common migration oversights:
- Remove unused notification imports
- Replace hardcoded timeout values with constants
- Remove legacy wrapper functions
- Extract long class attributes to computed properties
- Replace literal strings with constants

Based on lessons learned from ContactQRScanShowView.vue migration.
Includes validation commands and specific examples for each pattern.
This commit is contained in:
Matthew Raymer
2025-07-09 04:42:05 +00:00
parent 71e7eb4fb6
commit d8e7fc90e5
7 changed files with 753 additions and 242 deletions

View File

@@ -214,6 +214,30 @@ git commit -m "[user-approved-message]"
- [ ] **Confirm**: `this.$notify({type: "confirm"})``this.notify.confirm(message, onYes)`
- [ ] **Standard patterns**: Use `this.notify.confirmationSubmitted()`, `this.notify.sent()`, etc.
### [ ] 13.1. 🚨 CRITICAL: Replace ALL Hardcoded Timeout Values
- [ ] **Replace hardcoded timeouts**: `3000`, `5000`, `1000`, `2000` → timeout constants
- [ ] **Add timeout constants**: `COMPONENT_TIMEOUT_SHORT = 1000`, `COMPONENT_TIMEOUT_MEDIUM = 2000`, `COMPONENT_TIMEOUT_STANDARD = 3000`, `COMPONENT_TIMEOUT_LONG = 5000`
- [ ] **Import timeout constants**: Import from `@/constants/notifications`
- [ ] **Validation command**: `grep -n "notify\.[a-z]*(" [file] | grep -E "[0-9]{3,4}"`
### [ ] 13.2. 🚨 CRITICAL: Remove ALL Unused Notification Imports
- [ ] **Check each import**: Verify every imported `NOTIFY_*` constant is actually used
- [ ] **Remove unused imports**: Delete any `NOTIFY_*` constants not referenced in component
- [ ] **Validation command**: `grep -n "import.*NOTIFY_" [file]` then verify usage
- [ ] **Clean imports**: Only import notification constants that are actually used
### [ ] 13.3. 🚨 CRITICAL: Replace ALL Literal Strings with Constants
- [ ] **No literal strings**: All static notification messages must use constants
- [ ] **Add constants**: Create `NOTIFY_*` constants for ALL static messages
- [ ] **Replace literals**: `"The contact DID is missing."``NOTIFY_CONTACT_MISSING_DID.message`
- [ ] **Validation command**: `grep -n "notify\.[a-z]*(" [file] | grep -v "NOTIFY_\|message"`
### [ ] 13.4. 🚨 CRITICAL: Remove Legacy Wrapper Functions
- [ ] **Remove legacy functions**: Delete `danger()`, `success()`, `warning()`, `info()` wrapper functions
- [ ] **Direct usage**: Use `this.notify.error()` instead of `this.danger()`
- [ ] **Why remove**: Maintains consistency with centralized notification system
- [ ] **Validation command**: `grep -n "danger\|success\|warning\|info.*(" [file] | grep -v "notify\."`
### [ ] 14. Constants vs Literal Strings
- [ ] **Use constants** for static, reusable messages
- [ ] **Use literal strings** for dynamic messages with variables
@@ -234,6 +258,13 @@ git commit -m "[user-approved-message]"
- [ ] **Conditional Logic**: Extract complex `v-if` conditions to computed properties
- [ ] **Dynamic Values**: Convert repeated calculations to cached computed properties
### [ ] 16.1. 🚨 CRITICAL: Extract ALL Long Class Attributes
- [ ] **Find long classes**: Search for `class="[^"]{50,}"` (50+ character class strings)
- [ ] **Extract to computed**: Replace with `:class="computedPropertyName"`
- [ ] **Name descriptively**: Use names like `nameWarningClasses`, `buttonPrimaryClasses`
- [ ] **Validation command**: `grep -n "class=\"[^\"]\{50,\}" [file]`
- [ ] **Benefits**: Improves readability, enables reusability, makes testing easier
### [ ] 17. Document Computed Properties
- [ ] **JSDoc Comments**: Add comprehensive comments for all computed properties
- [ ] **Purpose Documentation**: Explain what template complexity each property solves
@@ -282,6 +313,16 @@ git commit -m "[user-approved-message]"
- [ ] **ALL** notifications through helper methods with centralized constants
- [ ] **ALL** complex template logic extracted to computed properties
### [ ] 22.1. 🚨 CRITICAL: Validate All Omission Fixes
- [ ] **NO** hardcoded timeout values (`1000`, `2000`, `3000`, `5000`)
- [ ] **NO** unused notification imports (all `NOTIFY_*` imports are used)
- [ ] **NO** literal strings in notification calls (all use constants)
- [ ] **NO** legacy wrapper functions (`danger()`, `success()`, etc.)
- [ ] **NO** long class attributes (50+ characters) in template
- [ ] **ALL** timeout values use constants
- [ ] **ALL** notification messages use centralized constants
- [ ] **ALL** class styling extracted to computed properties
## ⏱️ Time Tracking & Commit Phase
### [ ] 23. End Time Tracking