67 lines
3.2 KiB
Markdown
67 lines
3.2 KiB
Markdown
# Example: Before/After Diagram
|
|
|
|
## Scenario
|
|
|
|
A user asks: "Show the directory structure before and after our TypeScript migration."
|
|
|
|
## Generated Diagram
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────┐
|
|
│ JAVASCRIPT TO TYPESCRIPT MIGRATION │
|
|
└─────────────────────────────────────────────────────────────────────────┘
|
|
|
|
BEFORE (JavaScript): AFTER (TypeScript):
|
|
|
|
src/ src/
|
|
├── components/ ├── components/
|
|
│ ├── Button.js ──► │ ├── Button.tsx ✓
|
|
│ ├── Button.css ──► │ │ (CSS modules imported)
|
|
│ ├── Form.js ──► │ ├── Form.tsx ✓
|
|
│ ├── Form.css ──► │ │ (CSS modules imported)
|
|
│ └── Modal.js ──► │ └── Modal.tsx ✓
|
|
├── utils/ ├── utils/
|
|
│ ├── helpers.js ──► │ ├── helpers.ts ✓
|
|
│ ├── constants.js ──► │ ├── constants.ts ✓
|
|
│ └── api.js ──► │ └── api.ts ✓
|
|
├── hooks/ ├── hooks/
|
|
│ ├── useAuth.js ──► │ ├── useAuth.ts ✓
|
|
│ └── useForm.js ──► │ └── useForm.ts ✓
|
|
├── types/ NEW ├── types/
|
|
│ │ ├── index.ts ✓
|
|
│ │ ├── api.d.ts ✓
|
|
│ │ └── components.d.ts ✓
|
|
├── App.js ──► ├── App.tsx ✓
|
|
├── index.js ──► ├── index.tsx ✓
|
|
└── .eslintrc.js ──► ├── .eslintrc.js (updated)
|
|
└── tsconfig.json NEW
|
|
|
|
Configuration Files:
|
|
├── package.json ──► ├── package.json (updated deps)
|
|
├── jest.config.js ──► ├── jest.config.js (ts-jest)
|
|
└── .babelrc ✗ └── (removed - using tsc)
|
|
|
|
Legend:
|
|
✓ = Conversion complete
|
|
──► = Transformed/updated
|
|
✗ = Removed
|
|
NEW = New file/directory
|
|
```
|
|
|
|
## Explanation
|
|
|
|
This before/after diagram shows the complete scope of a TypeScript migration:
|
|
|
|
- **File transformations**: .js → .tsx/.ts conversions
|
|
- **New additions**: types/ directory with type definitions
|
|
- **Removed files**: Babel config (replaced by TypeScript compiler)
|
|
- **Updated configs**: ESLint and Jest configurations
|
|
|
|
The parallel columns make it easy to trace each file's transformation.
|
|
|
|
## Usage Suggestions
|
|
|
|
- Include in migration PR description
|
|
- Add to project README as migration record
|
|
- Reference in team communication about changes
|