mirror of
https://github.com/johndoe6345789/tsmorph.git
synced 2026-04-24 13:54:58 +00:00
101 lines
3.8 KiB
Markdown
101 lines
3.8 KiB
Markdown
# tsmorph
|
|
|
|
Automated TSX/TypeScript refactoring toolkit using [ts-morph](https://ts-morph.com/) to intelligently extract code blocks into separate, well-typed, lint-compliant files with automatic import management. The goal is to support smaller components (e.g., 50/100/150 LOC thresholds) and push more logic into hooks/utilities via a feedback loop.
|
|
|
|
## 🚀 Quick Start
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Run the complete refactoring pipeline
|
|
npm run refactor # Extract types & interfaces
|
|
npm run refactor:pass2 # Extract utility functions
|
|
npm run analyze-types # Add missing types & improve type safety
|
|
npm run fix-lint # Auto-fix lint issues & format code
|
|
npm run type-check # Verify everything compiles
|
|
```
|
|
|
|
## ✨ Features
|
|
|
|
- **Automated Code Extraction**: Extracts types, interfaces, and utility functions to separate files
|
|
- **Smaller Component Targets**: Supports tighter LOC targets (e.g., 50/100/150) by encouraging extraction into hooks and utilities
|
|
- **Feedback Loop Friendly**: Re-run the pipeline to keep shrinking components after each extraction pass
|
|
- **Smart Import Management**: Automatically adds, removes, and organizes imports
|
|
- **Type Analysis**: Infers and adds missing return types, parameter types, and fixes `any` types
|
|
- **Lint Auto-Fixing**: Integrates with ESLint and Prettier for consistent code quality
|
|
- **Type Safety**: Achieves 100% type coverage with precise union types
|
|
|
|
## 📊 Results
|
|
|
|
Starting with a monolithic TSX component, the tools automatically refactor it into:
|
|
|
|
| File | LOC | Purpose |
|
|
|------|-----|---------|
|
|
| `UserManagementDashboard.tsx` | Varies | Main component logic |
|
|
| `UserManagementDashboard.types.ts` | 22 | Type definitions & interfaces |
|
|
| `UserManagementDashboard.utils.ts` | 50 | Utility functions with precise types |
|
|
|
|
All with:
|
|
- ✅ Automatically managed imports
|
|
- ✅ 100% type coverage
|
|
- ✅ Lint-compliant code
|
|
- ✅ Precise union types (e.g., `"#ff6b6b" | "#4ecdc4" | "#95a5a6"`)
|
|
|
|
## 📖 Documentation
|
|
|
|
See [DOCUMENTATION.md](./DOCUMENTATION.md) for comprehensive guides on:
|
|
- How each refactoring tool works
|
|
- Customizing extraction patterns
|
|
- Type analysis details
|
|
- Configuration options
|
|
- Best practices
|
|
|
|
## 🛠️ Available Commands
|
|
|
|
| Command | Description |
|
|
|---------|-------------|
|
|
| `npm run refactor` | Extract types and interfaces (pass 1) |
|
|
| `npm run refactor:pass2` | Extract utility functions (pass 2) |
|
|
| `npm run analyze-types` | Analyze and fix type annotations |
|
|
| `npm run fix-lint` | Auto-fix lint issues and format code |
|
|
| `npm run type-check` | Verify TypeScript compilation |
|
|
| `npm run lint` | Check for lint issues |
|
|
| `npm run format` | Format all files with Prettier |
|
|
|
|
## 🧰 CLI Usage for Another App
|
|
|
|
Target any TSX file by passing file paths and thresholds directly to the scripts:
|
|
|
|
```bash
|
|
ts-node scripts/refactor-tsx.ts --file path/to/Dashboard.tsx --min-function-lines 50 --min-variable-lines 25
|
|
ts-node scripts/refactor-tsx-pass2.ts --file path/to/Dashboard.tsx --helper-pattern "^(validate|get|format|handle)"
|
|
ts-node scripts/analyze-types.ts --files path/to/Dashboard.types.ts,path/to/Dashboard.utils.ts,path/to/Dashboard.tsx
|
|
```
|
|
|
|
## 📦 Example Output
|
|
|
|
### Type Analysis Report
|
|
```
|
|
📊 Type Analysis: UserManagementDashboard.utils.ts
|
|
✓ Added return type to getRoleBadgeColor: "#ff6b6b" | "#4ecdc4" | "#95a5a6" | "#7f8c8d"
|
|
✓ Added return type to getStatusBadgeColor: "#2ecc71" | "#e74c3c"
|
|
✓ Added return type to formatDate: string
|
|
💾 Saved 3 type improvements
|
|
|
|
📈 Type Coverage Report: 100% (4/4 declarations typed)
|
|
✅ No 'any' types found
|
|
```
|
|
|
|
## 🎯 Key Technologies
|
|
|
|
- **ts-morph**: TypeScript AST manipulation
|
|
- **TypeScript**: Type inference and analysis
|
|
- **ESLint**: Code quality enforcement
|
|
- **Prettier**: Code formatting
|
|
- **ts-node**: Direct TypeScript execution
|
|
|
|
## 📝 License
|
|
|
|
MIT
|