Legacy Code Modernization Command

Command

/modernize

Description

Analyzes legacy code patterns and incrementally modernizes them while maintaining backward compatibility. Works file-by-file with a safety-first approach: characterization tests first, then refactor, then verify. Handles framework upgrades, language feature adoption, and architectural pattern migration.

Behavior

Arguments

• $ARGUMENTS -- Target scope and migration type (e.g., "convert callbacks to async/await in src/services/", "migrate class components to hooks")

Modernization Workflow

Phase 1: Assessment

1. Scan for legacy patterns:

   Pattern                          | Count | Files Affected
   -------------------------------- | ----- | --------------
   Callback-style async             | 23    | 8 files
   var declarations                 | 156   | 34 files
   CommonJS require()               | 89    | 22 files
   Class components (React)         | 12    | 12 files
   jQuery DOM manipulation          | 45    | 15 files
   

2. Prioritize by impact and risk:

   • High impact, low risk: var -> const/let, require -> import
   • High impact, medium risk: callbacks -> async/await
   • High impact, high risk: framework migration (jQuery -> React)

3. Present the migration plan for approval

Phase 2: Safety Net

1. Ensure existing tests pass (run the full suite)
2. Add characterization tests for untested code that will be modified
3. These tests capture CURRENT behavior (even if buggy) to detect regressions

Phase 3: Incremental Migration

For each file:

1. Read the entire file and understand its purpose
2. Apply the modernization pattern
3. Run tests to verify no regressions
4. Commit the change with a descriptive message

Common Modernizations

From	To	Approach
var	const / let	Scan for reassignment, use const by default
require()	import	Convert CJS to ESM, update package.json if needed
Callbacks	async / await	Wrap in Promise if needed, propagate async up the chain
.then() chains	async / await	Flatten promise chains, add try/catch
Class components	Function + Hooks	Extract state to useState, lifecycle to useEffect
moment.js	date-fns or native	Replace API calls one-by-one, use tree-shakeable imports
REST API	GraphQL	Add schema, migrate endpoints incrementally
JavaScript	TypeScript	Add .ts extension, add types incrementally with any escape hatch

Output Format

Copy
## Modernization Report

**Scope**: src/services/ (8 files)
**Pattern**: Callbacks to async/await

### Completed
| File | Changes | Tests |
|------|---------|-------|
| userService.ts | 5 callbacks converted | PASS |
| emailService.ts | 3 callbacks converted | PASS |
| paymentService.ts | 7 callbacks converted | PASS |

### Remaining
| File | Reason |
|------|--------|
| legacyAuth.ts | Depends on callback-only library. Needs wrapper. |

### Before/After

Examples

Copy
# Convert callbacks to async/await
/modernize convert callback functions to async/await in src/services/

# Migrate React class components to hooks
/modernize convert class components to functional components with hooks

# Convert CommonJS to ES modules
/modernize convert require() to import statements

# Adopt TypeScript
/modernize add TypeScript types to src/utils/