Initial commit
This commit is contained in:
Zhongwei Li
410
skills/angular-migration/SKILL.md
Normal file
410
skills/angular-migration/SKILL.md
Normal file
@@ -0,0 +1,410 @@
|
||||
---
|
||||
name: angular-migration
|
||||
description: Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.
|
||||
---
|
||||
|
||||
# Angular Migration
|
||||
|
||||
Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- Migrating AngularJS (1.x) applications to Angular (2+)
|
||||
- Running hybrid AngularJS/Angular applications
|
||||
- Converting directives to components
|
||||
- Modernizing dependency injection
|
||||
- Migrating routing systems
|
||||
- Updating to latest Angular versions
|
||||
- Implementing Angular best practices
|
||||
|
||||
## Migration Strategies
|
||||
|
||||
### 1. Big Bang (Complete Rewrite)
|
||||
- Rewrite entire app in Angular
|
||||
- Parallel development
|
||||
- Switch over at once
|
||||
- **Best for:** Small apps, green field projects
|
||||
|
||||
### 2. Incremental (Hybrid Approach)
|
||||
- Run AngularJS and Angular side-by-side
|
||||
- Migrate feature by feature
|
||||
- ngUpgrade for interop
|
||||
- **Best for:** Large apps, continuous delivery
|
||||
|
||||
### 3. Vertical Slice
|
||||
- Migrate one feature completely
|
||||
- New features in Angular, maintain old in AngularJS
|
||||
- Gradually replace
|
||||
- **Best for:** Medium apps, distinct features
|
||||
|
||||
## Hybrid App Setup
|
||||
|
||||
```typescript
|
||||
// main.ts - Bootstrap hybrid app
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { UpgradeModule } from '@angular/upgrade/static';
|
||||
import { AppModule } from './app/app.module';
|
||||
|
||||
platformBrowserDynamic()
|
||||
.bootstrapModule(AppModule)
|
||||
.then(platformRef => {
|
||||
const upgrade = platformRef.injector.get(UpgradeModule);
|
||||
// Bootstrap AngularJS
|
||||
upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });
|
||||
});
|
||||
```
|
||||
|
||||
```typescript
|
||||
// app.module.ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { UpgradeModule } from '@angular/upgrade/static';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
UpgradeModule
|
||||
]
|
||||
})
|
||||
export class AppModule {
|
||||
constructor(private upgrade: UpgradeModule) {}
|
||||
|
||||
ngDoBootstrap() {
|
||||
// Bootstrapped manually in main.ts
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Component Migration
|
||||
|
||||
### AngularJS Controller → Angular Component
|
||||
```javascript
|
||||
// Before: AngularJS controller
|
||||
angular.module('myApp').controller('UserController', function($scope, UserService) {
|
||||
$scope.user = {};
|
||||
|
||||
$scope.loadUser = function(id) {
|
||||
UserService.getUser(id).then(function(user) {
|
||||
$scope.user = user;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.saveUser = function() {
|
||||
UserService.saveUser($scope.user);
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
```typescript
|
||||
// After: Angular component
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { UserService } from './user.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user',
|
||||
template: `
|
||||
<div>
|
||||
<h2>{{ user.name }}</h2>
|
||||
<button (click)="saveUser()">Save</button>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class UserComponent implements OnInit {
|
||||
user: any = {};
|
||||
|
||||
constructor(private userService: UserService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.loadUser(1);
|
||||
}
|
||||
|
||||
loadUser(id: number) {
|
||||
this.userService.getUser(id).subscribe(user => {
|
||||
this.user = user;
|
||||
});
|
||||
}
|
||||
|
||||
saveUser() {
|
||||
this.userService.saveUser(this.user);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### AngularJS Directive → Angular Component
|
||||
```javascript
|
||||
// Before: AngularJS directive
|
||||
angular.module('myApp').directive('userCard', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
user: '=',
|
||||
onDelete: '&'
|
||||
},
|
||||
template: `
|
||||
<div class="card">
|
||||
<h3>{{ user.name }}</h3>
|
||||
<button ng-click="onDelete()">Delete</button>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
```typescript
|
||||
// After: Angular component
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-card',
|
||||
template: `
|
||||
<div class="card">
|
||||
<h3>{{ user.name }}</h3>
|
||||
<button (click)="delete.emit()">Delete</button>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class UserCardComponent {
|
||||
@Input() user: any;
|
||||
@Output() delete = new EventEmitter<void>();
|
||||
}
|
||||
|
||||
// Usage: <app-user-card [user]="user" (delete)="handleDelete()"></app-user-card>
|
||||
```
|
||||
|
||||
## Service Migration
|
||||
|
||||
```javascript
|
||||
// Before: AngularJS service
|
||||
angular.module('myApp').factory('UserService', function($http) {
|
||||
return {
|
||||
getUser: function(id) {
|
||||
return $http.get('/api/users/' + id);
|
||||
},
|
||||
saveUser: function(user) {
|
||||
return $http.post('/api/users', user);
|
||||
}
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
```typescript
|
||||
// After: Angular service
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class UserService {
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
getUser(id: number): Observable<any> {
|
||||
return this.http.get(`/api/users/${id}`);
|
||||
}
|
||||
|
||||
saveUser(user: any): Observable<any> {
|
||||
return this.http.post('/api/users', user);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Dependency Injection Changes
|
||||
|
||||
### Downgrading Angular → AngularJS
|
||||
```typescript
|
||||
// Angular service
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class NewService {
|
||||
getData() {
|
||||
return 'data from Angular';
|
||||
}
|
||||
}
|
||||
|
||||
// Make available to AngularJS
|
||||
import { downgradeInjectable } from '@angular/upgrade/static';
|
||||
|
||||
angular.module('myApp')
|
||||
.factory('newService', downgradeInjectable(NewService));
|
||||
|
||||
// Use in AngularJS
|
||||
angular.module('myApp').controller('OldController', function(newService) {
|
||||
console.log(newService.getData());
|
||||
});
|
||||
```
|
||||
|
||||
### Upgrading AngularJS → Angular
|
||||
```typescript
|
||||
// AngularJS service
|
||||
angular.module('myApp').factory('oldService', function() {
|
||||
return {
|
||||
getData: function() {
|
||||
return 'data from AngularJS';
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// Make available to Angular
|
||||
import { InjectionToken } from '@angular/core';
|
||||
|
||||
export const OLD_SERVICE = new InjectionToken<any>('oldService');
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
{
|
||||
provide: OLD_SERVICE,
|
||||
useFactory: (i: any) => i.get('oldService'),
|
||||
deps: ['$injector']
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// Use in Angular
|
||||
@Component({...})
|
||||
export class NewComponent {
|
||||
constructor(@Inject(OLD_SERVICE) private oldService: any) {
|
||||
console.log(this.oldService.getData());
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Routing Migration
|
||||
|
||||
```javascript
|
||||
// Before: AngularJS routing
|
||||
angular.module('myApp').config(function($routeProvider) {
|
||||
$routeProvider
|
||||
.when('/users', {
|
||||
template: '<user-list></user-list>'
|
||||
})
|
||||
.when('/users/:id', {
|
||||
template: '<user-detail></user-detail>'
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
```typescript
|
||||
// After: Angular routing
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: 'users', component: UserListComponent },
|
||||
{ path: 'users/:id', component: UserDetailComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
```
|
||||
|
||||
## Forms Migration
|
||||
|
||||
```html
|
||||
<!-- Before: AngularJS -->
|
||||
<form name="userForm" ng-submit="saveUser()">
|
||||
<input type="text" ng-model="user.name" required>
|
||||
<input type="email" ng-model="user.email" required>
|
||||
<button ng-disabled="userForm.$invalid">Save</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
```typescript
|
||||
// After: Angular (Template-driven)
|
||||
@Component({
|
||||
template: `
|
||||
<form #userForm="ngForm" (ngSubmit)="saveUser()">
|
||||
<input type="text" [(ngModel)]="user.name" name="name" required>
|
||||
<input type="email" [(ngModel)]="user.email" name="email" required>
|
||||
<button [disabled]="userForm.invalid">Save</button>
|
||||
</form>
|
||||
`
|
||||
})
|
||||
|
||||
// Or Reactive Forms (preferred)
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<form [formGroup]="userForm" (ngSubmit)="saveUser()">
|
||||
<input formControlName="name">
|
||||
<input formControlName="email">
|
||||
<button [disabled]="userForm.invalid">Save</button>
|
||||
</form>
|
||||
`
|
||||
})
|
||||
export class UserFormComponent {
|
||||
userForm: FormGroup;
|
||||
|
||||
constructor(private fb: FormBuilder) {
|
||||
this.userForm = this.fb.group({
|
||||
name: ['', Validators.required],
|
||||
email: ['', [Validators.required, Validators.email]]
|
||||
});
|
||||
}
|
||||
|
||||
saveUser() {
|
||||
console.log(this.userForm.value);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Migration Timeline
|
||||
|
||||
```
|
||||
Phase 1: Setup (1-2 weeks)
|
||||
- Install Angular CLI
|
||||
- Set up hybrid app
|
||||
- Configure build tools
|
||||
- Set up testing
|
||||
|
||||
Phase 2: Infrastructure (2-4 weeks)
|
||||
- Migrate services
|
||||
- Migrate utilities
|
||||
- Set up routing
|
||||
- Migrate shared components
|
||||
|
||||
Phase 3: Feature Migration (varies)
|
||||
- Migrate feature by feature
|
||||
- Test thoroughly
|
||||
- Deploy incrementally
|
||||
|
||||
Phase 4: Cleanup (1-2 weeks)
|
||||
- Remove AngularJS code
|
||||
- Remove ngUpgrade
|
||||
- Optimize bundle
|
||||
- Final testing
|
||||
```
|
||||
|
||||
## Resources
|
||||
|
||||
- **references/hybrid-mode.md**: Hybrid app patterns
|
||||
- **references/component-migration.md**: Component conversion guide
|
||||
- **references/dependency-injection.md**: DI migration strategies
|
||||
- **references/routing.md**: Routing migration
|
||||
- **assets/hybrid-bootstrap.ts**: Hybrid app template
|
||||
- **assets/migration-timeline.md**: Project planning
|
||||
- **scripts/analyze-angular-app.sh**: App analysis script
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Start with Services**: Migrate services first (easier)
|
||||
2. **Incremental Approach**: Feature-by-feature migration
|
||||
3. **Test Continuously**: Test at every step
|
||||
4. **Use TypeScript**: Migrate to TypeScript early
|
||||
5. **Follow Style Guide**: Angular style guide from day 1
|
||||
6. **Optimize Later**: Get it working, then optimize
|
||||
7. **Document**: Keep migration notes
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- Not setting up hybrid app correctly
|
||||
- Migrating UI before logic
|
||||
- Ignoring change detection differences
|
||||
- Not handling scope properly
|
||||
- Mixing patterns (AngularJS + Angular)
|
||||
- Inadequate testing
|
||||
424
skills/database-migration/SKILL.md
Normal file
424
skills/database-migration/SKILL.md
Normal file
@@ -0,0 +1,424 @@
|
||||
---
|
||||
name: database-migration
|
||||
description: Execute database migrations across ORMs and platforms with zero-downtime strategies, data transformation, and rollback procedures. Use when migrating databases, changing schemas, performing data transformations, or implementing zero-downtime deployment strategies.
|
||||
---
|
||||
|
||||
# Database Migration
|
||||
|
||||
Master database schema and data migrations across ORMs (Sequelize, TypeORM, Prisma), including rollback strategies and zero-downtime deployments.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- Migrating between different ORMs
|
||||
- Performing schema transformations
|
||||
- Moving data between databases
|
||||
- Implementing rollback procedures
|
||||
- Zero-downtime deployments
|
||||
- Database version upgrades
|
||||
- Data model refactoring
|
||||
|
||||
## ORM Migrations
|
||||
|
||||
### Sequelize Migrations
|
||||
```javascript
|
||||
// migrations/20231201-create-users.js
|
||||
module.exports = {
|
||||
up: async (queryInterface, Sequelize) => {
|
||||
await queryInterface.createTable('users', {
|
||||
id: {
|
||||
type: Sequelize.INTEGER,
|
||||
primaryKey: true,
|
||||
autoIncrement: true
|
||||
},
|
||||
email: {
|
||||
type: Sequelize.STRING,
|
||||
unique: true,
|
||||
allowNull: false
|
||||
},
|
||||
createdAt: Sequelize.DATE,
|
||||
updatedAt: Sequelize.DATE
|
||||
});
|
||||
},
|
||||
|
||||
down: async (queryInterface, Sequelize) => {
|
||||
await queryInterface.dropTable('users');
|
||||
}
|
||||
};
|
||||
|
||||
// Run: npx sequelize-cli db:migrate
|
||||
// Rollback: npx sequelize-cli db:migrate:undo
|
||||
```
|
||||
|
||||
### TypeORM Migrations
|
||||
```typescript
|
||||
// migrations/1701234567-CreateUsers.ts
|
||||
import { MigrationInterface, QueryRunner, Table } from 'typeorm';
|
||||
|
||||
export class CreateUsers1701234567 implements MigrationInterface {
|
||||
public async up(queryRunner: QueryRunner): Promise<void> {
|
||||
await queryRunner.createTable(
|
||||
new Table({
|
||||
name: 'users',
|
||||
columns: [
|
||||
{
|
||||
name: 'id',
|
||||
type: 'int',
|
||||
isPrimary: true,
|
||||
isGenerated: true,
|
||||
generationStrategy: 'increment'
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
type: 'varchar',
|
||||
isUnique: true
|
||||
},
|
||||
{
|
||||
name: 'created_at',
|
||||
type: 'timestamp',
|
||||
default: 'CURRENT_TIMESTAMP'
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
public async down(queryRunner: QueryRunner): Promise<void> {
|
||||
await queryRunner.dropTable('users');
|
||||
}
|
||||
}
|
||||
|
||||
// Run: npm run typeorm migration:run
|
||||
// Rollback: npm run typeorm migration:revert
|
||||
```
|
||||
|
||||
### Prisma Migrations
|
||||
```prisma
|
||||
// schema.prisma
|
||||
model User {
|
||||
id Int @id @default(autoincrement())
|
||||
email String @unique
|
||||
createdAt DateTime @default(now())
|
||||
}
|
||||
|
||||
// Generate migration: npx prisma migrate dev --name create_users
|
||||
// Apply: npx prisma migrate deploy
|
||||
```
|
||||
|
||||
## Schema Transformations
|
||||
|
||||
### Adding Columns with Defaults
|
||||
```javascript
|
||||
// Safe migration: add column with default
|
||||
module.exports = {
|
||||
up: async (queryInterface, Sequelize) => {
|
||||
await queryInterface.addColumn('users', 'status', {
|
||||
type: Sequelize.STRING,
|
||||
defaultValue: 'active',
|
||||
allowNull: false
|
||||
});
|
||||
},
|
||||
|
||||
down: async (queryInterface) => {
|
||||
await queryInterface.removeColumn('users', 'status');
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Renaming Columns (Zero Downtime)
|
||||
```javascript
|
||||
// Step 1: Add new column
|
||||
module.exports = {
|
||||
up: async (queryInterface, Sequelize) => {
|
||||
await queryInterface.addColumn('users', 'full_name', {
|
||||
type: Sequelize.STRING
|
||||
});
|
||||
|
||||
// Copy data from old column
|
||||
await queryInterface.sequelize.query(
|
||||
'UPDATE users SET full_name = name'
|
||||
);
|
||||
},
|
||||
|
||||
down: async (queryInterface) => {
|
||||
await queryInterface.removeColumn('users', 'full_name');
|
||||
}
|
||||
};
|
||||
|
||||
// Step 2: Update application to use new column
|
||||
|
||||
// Step 3: Remove old column
|
||||
module.exports = {
|
||||
up: async (queryInterface) => {
|
||||
await queryInterface.removeColumn('users', 'name');
|
||||
},
|
||||
|
||||
down: async (queryInterface, Sequelize) => {
|
||||
await queryInterface.addColumn('users', 'name', {
|
||||
type: Sequelize.STRING
|
||||
});
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Changing Column Types
|
||||
```javascript
|
||||
module.exports = {
|
||||
up: async (queryInterface, Sequelize) => {
|
||||
// For large tables, use multi-step approach
|
||||
|
||||
// 1. Add new column
|
||||
await queryInterface.addColumn('users', 'age_new', {
|
||||
type: Sequelize.INTEGER
|
||||
});
|
||||
|
||||
// 2. Copy and transform data
|
||||
await queryInterface.sequelize.query(`
|
||||
UPDATE users
|
||||
SET age_new = CAST(age AS INTEGER)
|
||||
WHERE age IS NOT NULL
|
||||
`);
|
||||
|
||||
// 3. Drop old column
|
||||
await queryInterface.removeColumn('users', 'age');
|
||||
|
||||
// 4. Rename new column
|
||||
await queryInterface.renameColumn('users', 'age_new', 'age');
|
||||
},
|
||||
|
||||
down: async (queryInterface, Sequelize) => {
|
||||
await queryInterface.changeColumn('users', 'age', {
|
||||
type: Sequelize.STRING
|
||||
});
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Data Transformations
|
||||
|
||||
### Complex Data Migration
|
||||
```javascript
|
||||
module.exports = {
|
||||
up: async (queryInterface, Sequelize) => {
|
||||
// Get all records
|
||||
const [users] = await queryInterface.sequelize.query(
|
||||
'SELECT id, address_string FROM users'
|
||||
);
|
||||
|
||||
// Transform each record
|
||||
for (const user of users) {
|
||||
const addressParts = user.address_string.split(',');
|
||||
|
||||
await queryInterface.sequelize.query(
|
||||
`UPDATE users
|
||||
SET street = :street,
|
||||
city = :city,
|
||||
state = :state
|
||||
WHERE id = :id`,
|
||||
{
|
||||
replacements: {
|
||||
id: user.id,
|
||||
street: addressParts[0]?.trim(),
|
||||
city: addressParts[1]?.trim(),
|
||||
state: addressParts[2]?.trim()
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Drop old column
|
||||
await queryInterface.removeColumn('users', 'address_string');
|
||||
},
|
||||
|
||||
down: async (queryInterface, Sequelize) => {
|
||||
// Reconstruct original column
|
||||
await queryInterface.addColumn('users', 'address_string', {
|
||||
type: Sequelize.STRING
|
||||
});
|
||||
|
||||
await queryInterface.sequelize.query(`
|
||||
UPDATE users
|
||||
SET address_string = CONCAT(street, ', ', city, ', ', state)
|
||||
`);
|
||||
|
||||
await queryInterface.removeColumn('users', 'street');
|
||||
await queryInterface.removeColumn('users', 'city');
|
||||
await queryInterface.removeColumn('users', 'state');
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Rollback Strategies
|
||||
|
||||
### Transaction-Based Migrations
|
||||
```javascript
|
||||
module.exports = {
|
||||
up: async (queryInterface, Sequelize) => {
|
||||
const transaction = await queryInterface.sequelize.transaction();
|
||||
|
||||
try {
|
||||
await queryInterface.addColumn(
|
||||
'users',
|
||||
'verified',
|
||||
{ type: Sequelize.BOOLEAN, defaultValue: false },
|
||||
{ transaction }
|
||||
);
|
||||
|
||||
await queryInterface.sequelize.query(
|
||||
'UPDATE users SET verified = true WHERE email_verified_at IS NOT NULL',
|
||||
{ transaction }
|
||||
);
|
||||
|
||||
await transaction.commit();
|
||||
} catch (error) {
|
||||
await transaction.rollback();
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
down: async (queryInterface) => {
|
||||
await queryInterface.removeColumn('users', 'verified');
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Checkpoint-Based Rollback
|
||||
```javascript
|
||||
module.exports = {
|
||||
up: async (queryInterface, Sequelize) => {
|
||||
// Create backup table
|
||||
await queryInterface.sequelize.query(
|
||||
'CREATE TABLE users_backup AS SELECT * FROM users'
|
||||
);
|
||||
|
||||
try {
|
||||
// Perform migration
|
||||
await queryInterface.addColumn('users', 'new_field', {
|
||||
type: Sequelize.STRING
|
||||
});
|
||||
|
||||
// Verify migration
|
||||
const [result] = await queryInterface.sequelize.query(
|
||||
"SELECT COUNT(*) as count FROM users WHERE new_field IS NULL"
|
||||
);
|
||||
|
||||
if (result[0].count > 0) {
|
||||
throw new Error('Migration verification failed');
|
||||
}
|
||||
|
||||
// Drop backup
|
||||
await queryInterface.dropTable('users_backup');
|
||||
} catch (error) {
|
||||
// Restore from backup
|
||||
await queryInterface.sequelize.query('DROP TABLE users');
|
||||
await queryInterface.sequelize.query(
|
||||
'CREATE TABLE users AS SELECT * FROM users_backup'
|
||||
);
|
||||
await queryInterface.dropTable('users_backup');
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Zero-Downtime Migrations
|
||||
|
||||
### Blue-Green Deployment Strategy
|
||||
```javascript
|
||||
// Phase 1: Make changes backward compatible
|
||||
module.exports = {
|
||||
up: async (queryInterface, Sequelize) => {
|
||||
// Add new column (both old and new code can work)
|
||||
await queryInterface.addColumn('users', 'email_new', {
|
||||
type: Sequelize.STRING
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Phase 2: Deploy code that writes to both columns
|
||||
|
||||
// Phase 3: Backfill data
|
||||
module.exports = {
|
||||
up: async (queryInterface) => {
|
||||
await queryInterface.sequelize.query(`
|
||||
UPDATE users
|
||||
SET email_new = email
|
||||
WHERE email_new IS NULL
|
||||
`);
|
||||
}
|
||||
};
|
||||
|
||||
// Phase 4: Deploy code that reads from new column
|
||||
|
||||
// Phase 5: Remove old column
|
||||
module.exports = {
|
||||
up: async (queryInterface) => {
|
||||
await queryInterface.removeColumn('users', 'email');
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Cross-Database Migrations
|
||||
|
||||
### PostgreSQL to MySQL
|
||||
```javascript
|
||||
// Handle differences
|
||||
module.exports = {
|
||||
up: async (queryInterface, Sequelize) => {
|
||||
const dialectName = queryInterface.sequelize.getDialect();
|
||||
|
||||
if (dialectName === 'mysql') {
|
||||
await queryInterface.createTable('users', {
|
||||
id: {
|
||||
type: Sequelize.INTEGER,
|
||||
primaryKey: true,
|
||||
autoIncrement: true
|
||||
},
|
||||
data: {
|
||||
type: Sequelize.JSON // MySQL JSON type
|
||||
}
|
||||
});
|
||||
} else if (dialectName === 'postgres') {
|
||||
await queryInterface.createTable('users', {
|
||||
id: {
|
||||
type: Sequelize.INTEGER,
|
||||
primaryKey: true,
|
||||
autoIncrement: true
|
||||
},
|
||||
data: {
|
||||
type: Sequelize.JSONB // PostgreSQL JSONB type
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Resources
|
||||
|
||||
- **references/orm-switching.md**: ORM migration guides
|
||||
- **references/schema-migration.md**: Schema transformation patterns
|
||||
- **references/data-transformation.md**: Data migration scripts
|
||||
- **references/rollback-strategies.md**: Rollback procedures
|
||||
- **assets/schema-migration-template.sql**: SQL migration templates
|
||||
- **assets/data-migration-script.py**: Data migration utilities
|
||||
- **scripts/test-migration.sh**: Migration testing script
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Always Provide Rollback**: Every up() needs a down()
|
||||
2. **Test Migrations**: Test on staging first
|
||||
3. **Use Transactions**: Atomic migrations when possible
|
||||
4. **Backup First**: Always backup before migration
|
||||
5. **Small Changes**: Break into small, incremental steps
|
||||
6. **Monitor**: Watch for errors during deployment
|
||||
7. **Document**: Explain why and how
|
||||
8. **Idempotent**: Migrations should be rerunnable
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- Not testing rollback procedures
|
||||
- Making breaking changes without downtime strategy
|
||||
- Forgetting to handle NULL values
|
||||
- Not considering index performance
|
||||
- Ignoring foreign key constraints
|
||||
- Migrating too much data at once
|
||||
409
skills/dependency-upgrade/SKILL.md
Normal file
409
skills/dependency-upgrade/SKILL.md
Normal file
@@ -0,0 +1,409 @@
|
||||
---
|
||||
name: dependency-upgrade
|
||||
description: Manage major dependency version upgrades with compatibility analysis, staged rollout, and comprehensive testing. Use when upgrading framework versions, updating major dependencies, or managing breaking changes in libraries.
|
||||
---
|
||||
|
||||
# Dependency Upgrade
|
||||
|
||||
Master major dependency version upgrades, compatibility analysis, staged upgrade strategies, and comprehensive testing approaches.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- Upgrading major framework versions
|
||||
- Updating security-vulnerable dependencies
|
||||
- Modernizing legacy dependencies
|
||||
- Resolving dependency conflicts
|
||||
- Planning incremental upgrade paths
|
||||
- Testing compatibility matrices
|
||||
- Automating dependency updates
|
||||
|
||||
## Semantic Versioning Review
|
||||
|
||||
```
|
||||
MAJOR.MINOR.PATCH (e.g., 2.3.1)
|
||||
|
||||
MAJOR: Breaking changes
|
||||
MINOR: New features, backward compatible
|
||||
PATCH: Bug fixes, backward compatible
|
||||
|
||||
^2.3.1 = >=2.3.1 <3.0.0 (minor updates)
|
||||
~2.3.1 = >=2.3.1 <2.4.0 (patch updates)
|
||||
2.3.1 = exact version
|
||||
```
|
||||
|
||||
## Dependency Analysis
|
||||
|
||||
### Audit Dependencies
|
||||
```bash
|
||||
# npm
|
||||
npm outdated
|
||||
npm audit
|
||||
npm audit fix
|
||||
|
||||
# yarn
|
||||
yarn outdated
|
||||
yarn audit
|
||||
|
||||
# Check for major updates
|
||||
npx npm-check-updates
|
||||
npx npm-check-updates -u # Update package.json
|
||||
```
|
||||
|
||||
### Analyze Dependency Tree
|
||||
```bash
|
||||
# See why a package is installed
|
||||
npm ls package-name
|
||||
yarn why package-name
|
||||
|
||||
# Find duplicate packages
|
||||
npm dedupe
|
||||
yarn dedupe
|
||||
|
||||
# Visualize dependencies
|
||||
npx madge --image graph.png src/
|
||||
```
|
||||
|
||||
## Compatibility Matrix
|
||||
|
||||
```javascript
|
||||
// compatibility-matrix.js
|
||||
const compatibilityMatrix = {
|
||||
'react': {
|
||||
'16.x': {
|
||||
'react-dom': '^16.0.0',
|
||||
'react-router-dom': '^5.0.0',
|
||||
'@testing-library/react': '^11.0.0'
|
||||
},
|
||||
'17.x': {
|
||||
'react-dom': '^17.0.0',
|
||||
'react-router-dom': '^5.0.0 || ^6.0.0',
|
||||
'@testing-library/react': '^12.0.0'
|
||||
},
|
||||
'18.x': {
|
||||
'react-dom': '^18.0.0',
|
||||
'react-router-dom': '^6.0.0',
|
||||
'@testing-library/react': '^13.0.0'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function checkCompatibility(packages) {
|
||||
// Validate package versions against matrix
|
||||
}
|
||||
```
|
||||
|
||||
## Staged Upgrade Strategy
|
||||
|
||||
### Phase 1: Planning
|
||||
```bash
|
||||
# 1. Identify current versions
|
||||
npm list --depth=0
|
||||
|
||||
# 2. Check for breaking changes
|
||||
# Read CHANGELOG.md and MIGRATION.md
|
||||
|
||||
# 3. Create upgrade plan
|
||||
echo "Upgrade order:
|
||||
1. TypeScript
|
||||
2. React
|
||||
3. React Router
|
||||
4. Testing libraries
|
||||
5. Build tools" > UPGRADE_PLAN.md
|
||||
```
|
||||
|
||||
### Phase 2: Incremental Updates
|
||||
```bash
|
||||
# Don't upgrade everything at once!
|
||||
|
||||
# Step 1: Update TypeScript
|
||||
npm install typescript@latest
|
||||
|
||||
# Test
|
||||
npm run test
|
||||
npm run build
|
||||
|
||||
# Step 2: Update React (one major version at a time)
|
||||
npm install react@17 react-dom@17
|
||||
|
||||
# Test again
|
||||
npm run test
|
||||
|
||||
# Step 3: Continue with other packages
|
||||
npm install react-router-dom@6
|
||||
|
||||
# And so on...
|
||||
```
|
||||
|
||||
### Phase 3: Validation
|
||||
```javascript
|
||||
// tests/compatibility.test.js
|
||||
describe('Dependency Compatibility', () => {
|
||||
it('should have compatible React versions', () => {
|
||||
const reactVersion = require('react/package.json').version;
|
||||
const reactDomVersion = require('react-dom/package.json').version;
|
||||
|
||||
expect(reactVersion).toBe(reactDomVersion);
|
||||
});
|
||||
|
||||
it('should not have peer dependency warnings', () => {
|
||||
// Run npm ls and check for warnings
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Breaking Change Handling
|
||||
|
||||
### Identifying Breaking Changes
|
||||
```bash
|
||||
# Use changelog parsers
|
||||
npx changelog-parser react 16.0.0 17.0.0
|
||||
|
||||
# Or manually check
|
||||
curl https://raw.githubusercontent.com/facebook/react/main/CHANGELOG.md
|
||||
```
|
||||
|
||||
### Codemod for Automated Fixes
|
||||
```bash
|
||||
# React upgrade codemods
|
||||
npx react-codeshift <transform> <path>
|
||||
|
||||
# Example: Update lifecycle methods
|
||||
npx react-codeshift \
|
||||
--parser tsx \
|
||||
--transform react-codeshift/transforms/rename-unsafe-lifecycles.js \
|
||||
src/
|
||||
```
|
||||
|
||||
### Custom Migration Script
|
||||
```javascript
|
||||
// migration-script.js
|
||||
const fs = require('fs');
|
||||
const glob = require('glob');
|
||||
|
||||
glob('src/**/*.tsx', (err, files) => {
|
||||
files.forEach(file => {
|
||||
let content = fs.readFileSync(file, 'utf8');
|
||||
|
||||
// Replace old API with new API
|
||||
content = content.replace(
|
||||
/componentWillMount/g,
|
||||
'UNSAFE_componentWillMount'
|
||||
);
|
||||
|
||||
// Update imports
|
||||
content = content.replace(
|
||||
/import { Component } from 'react'/g,
|
||||
"import React, { Component } from 'react'"
|
||||
);
|
||||
|
||||
fs.writeFileSync(file, content);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Testing Strategy
|
||||
|
||||
### Unit Tests
|
||||
```javascript
|
||||
// Ensure tests pass before and after upgrade
|
||||
npm run test
|
||||
|
||||
// Update test utilities if needed
|
||||
npm install @testing-library/react@latest
|
||||
```
|
||||
|
||||
### Integration Tests
|
||||
```javascript
|
||||
// tests/integration/app.test.js
|
||||
describe('App Integration', () => {
|
||||
it('should render without crashing', () => {
|
||||
render(<App />);
|
||||
});
|
||||
|
||||
it('should handle navigation', () => {
|
||||
const { getByText } = render(<App />);
|
||||
fireEvent.click(getByText('Navigate'));
|
||||
expect(screen.getByText('New Page')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### Visual Regression Tests
|
||||
```javascript
|
||||
// visual-regression.test.js
|
||||
describe('Visual Regression', () => {
|
||||
it('should match snapshot', () => {
|
||||
const { container } = render(<App />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### E2E Tests
|
||||
```javascript
|
||||
// cypress/e2e/app.cy.js
|
||||
describe('E2E Tests', () => {
|
||||
it('should complete user flow', () => {
|
||||
cy.visit('/');
|
||||
cy.get('[data-testid="login"]').click();
|
||||
cy.get('input[name="email"]').type('user@example.com');
|
||||
cy.get('button[type="submit"]').click();
|
||||
cy.url().should('include', '/dashboard');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Automated Dependency Updates
|
||||
|
||||
### Renovate Configuration
|
||||
```json
|
||||
// renovate.json
|
||||
{
|
||||
"extends": ["config:base"],
|
||||
"packageRules": [
|
||||
{
|
||||
"matchUpdateTypes": ["minor", "patch"],
|
||||
"automerge": true
|
||||
},
|
||||
{
|
||||
"matchUpdateTypes": ["major"],
|
||||
"automerge": false,
|
||||
"labels": ["major-update"]
|
||||
}
|
||||
],
|
||||
"schedule": ["before 3am on Monday"],
|
||||
"timezone": "America/New_York"
|
||||
}
|
||||
```
|
||||
|
||||
### Dependabot Configuration
|
||||
```yaml
|
||||
# .github/dependabot.yml
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: "npm"
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: "weekly"
|
||||
open-pull-requests-limit: 5
|
||||
reviewers:
|
||||
- "team-leads"
|
||||
commit-message:
|
||||
prefix: "chore"
|
||||
include: "scope"
|
||||
```
|
||||
|
||||
## Rollback Plan
|
||||
|
||||
```javascript
|
||||
// rollback.sh
|
||||
#!/bin/bash
|
||||
|
||||
# Save current state
|
||||
git stash
|
||||
git checkout -b upgrade-branch
|
||||
|
||||
# Attempt upgrade
|
||||
npm install package@latest
|
||||
|
||||
# Run tests
|
||||
if npm run test; then
|
||||
echo "Upgrade successful"
|
||||
git add package.json package-lock.json
|
||||
git commit -m "chore: upgrade package"
|
||||
else
|
||||
echo "Upgrade failed, rolling back"
|
||||
git checkout main
|
||||
git branch -D upgrade-branch
|
||||
npm install # Restore from package-lock.json
|
||||
fi
|
||||
```
|
||||
|
||||
## Common Upgrade Patterns
|
||||
|
||||
### Lock File Management
|
||||
```bash
|
||||
# npm
|
||||
npm install --package-lock-only # Update lock file only
|
||||
npm ci # Clean install from lock file
|
||||
|
||||
# yarn
|
||||
yarn install --frozen-lockfile # CI mode
|
||||
yarn upgrade-interactive # Interactive upgrades
|
||||
```
|
||||
|
||||
### Peer Dependency Resolution
|
||||
```bash
|
||||
# npm 7+: strict peer dependencies
|
||||
npm install --legacy-peer-deps # Ignore peer deps
|
||||
|
||||
# npm 8+: override peer dependencies
|
||||
npm install --force
|
||||
```
|
||||
|
||||
### Workspace Upgrades
|
||||
```bash
|
||||
# Update all workspace packages
|
||||
npm install --workspaces
|
||||
|
||||
# Update specific workspace
|
||||
npm install package@latest --workspace=packages/app
|
||||
```
|
||||
|
||||
## Resources
|
||||
|
||||
- **references/semver.md**: Semantic versioning guide
|
||||
- **references/compatibility-matrix.md**: Common compatibility issues
|
||||
- **references/staged-upgrades.md**: Incremental upgrade strategies
|
||||
- **references/testing-strategy.md**: Comprehensive testing approaches
|
||||
- **assets/upgrade-checklist.md**: Step-by-step checklist
|
||||
- **assets/compatibility-matrix.csv**: Version compatibility table
|
||||
- **scripts/audit-dependencies.sh**: Dependency audit script
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Read Changelogs**: Understand what changed
|
||||
2. **Upgrade Incrementally**: One major version at a time
|
||||
3. **Test Thoroughly**: Unit, integration, E2E tests
|
||||
4. **Check Peer Dependencies**: Resolve conflicts early
|
||||
5. **Use Lock Files**: Ensure reproducible installs
|
||||
6. **Automate Updates**: Use Renovate or Dependabot
|
||||
7. **Monitor**: Watch for runtime errors post-upgrade
|
||||
8. **Document**: Keep upgrade notes
|
||||
|
||||
## Upgrade Checklist
|
||||
|
||||
```markdown
|
||||
Pre-Upgrade:
|
||||
- [ ] Review current dependency versions
|
||||
- [ ] Read changelogs for breaking changes
|
||||
- [ ] Create feature branch
|
||||
- [ ] Backup current state (git tag)
|
||||
- [ ] Run full test suite (baseline)
|
||||
|
||||
During Upgrade:
|
||||
- [ ] Upgrade one dependency at a time
|
||||
- [ ] Update peer dependencies
|
||||
- [ ] Fix TypeScript errors
|
||||
- [ ] Update tests if needed
|
||||
- [ ] Run test suite after each upgrade
|
||||
- [ ] Check bundle size impact
|
||||
|
||||
Post-Upgrade:
|
||||
- [ ] Full regression testing
|
||||
- [ ] Performance testing
|
||||
- [ ] Update documentation
|
||||
- [ ] Deploy to staging
|
||||
- [ ] Monitor for errors
|
||||
- [ ] Deploy to production
|
||||
```
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- Upgrading all dependencies at once
|
||||
- Not testing after each upgrade
|
||||
- Ignoring peer dependency warnings
|
||||
- Forgetting to update lock file
|
||||
- Not reading breaking change notes
|
||||
- Skipping major versions
|
||||
- Not having rollback plan
|
||||
513
skills/react-modernization/SKILL.md
Normal file
513
skills/react-modernization/SKILL.md
Normal file
@@ -0,0 +1,513 @@
|
||||
---
|
||||
name: react-modernization
|
||||
description: Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
|
||||
---
|
||||
|
||||
# React Modernization
|
||||
|
||||
Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- Upgrading React applications to latest versions
|
||||
- Migrating class components to functional components with hooks
|
||||
- Adopting concurrent React features (Suspense, transitions)
|
||||
- Applying codemods for automated refactoring
|
||||
- Modernizing state management patterns
|
||||
- Updating to TypeScript
|
||||
- Improving performance with React 18+ features
|
||||
|
||||
## Version Upgrade Path
|
||||
|
||||
### React 16 → 17 → 18
|
||||
|
||||
**Breaking Changes by Version:**
|
||||
|
||||
**React 17:**
|
||||
- Event delegation changes
|
||||
- No event pooling
|
||||
- Effect cleanup timing
|
||||
- JSX transform (no React import needed)
|
||||
|
||||
**React 18:**
|
||||
- Automatic batching
|
||||
- Concurrent rendering
|
||||
- Strict Mode changes (double invocation)
|
||||
- New root API
|
||||
- Suspense on server
|
||||
|
||||
## Class to Hooks Migration
|
||||
|
||||
### State Management
|
||||
```javascript
|
||||
// Before: Class component
|
||||
class Counter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
count: 0,
|
||||
name: ''
|
||||
};
|
||||
}
|
||||
|
||||
increment = () => {
|
||||
this.setState({ count: this.state.count + 1 });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<p>Count: {this.state.count}</p>
|
||||
<button onClick={this.increment}>Increment</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// After: Functional component with hooks
|
||||
function Counter() {
|
||||
const [count, setCount] = useState(0);
|
||||
const [name, setName] = useState('');
|
||||
|
||||
const increment = () => {
|
||||
setCount(count + 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>Count: {count}</p>
|
||||
<button onClick={increment}>Increment</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Lifecycle Methods to Hooks
|
||||
```javascript
|
||||
// Before: Lifecycle methods
|
||||
class DataFetcher extends React.Component {
|
||||
state = { data: null, loading: true };
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.id !== this.props.id) {
|
||||
this.fetchData();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.cancelRequest();
|
||||
}
|
||||
|
||||
fetchData = async () => {
|
||||
const data = await fetch(`/api/${this.props.id}`);
|
||||
this.setState({ data, loading: false });
|
||||
};
|
||||
|
||||
cancelRequest = () => {
|
||||
// Cleanup
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.loading) return <div>Loading...</div>;
|
||||
return <div>{this.state.data}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
// After: useEffect hook
|
||||
function DataFetcher({ id }) {
|
||||
const [data, setData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/${id}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (!cancelled) {
|
||||
setData(result);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
if (!cancelled) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
|
||||
// Cleanup function
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [id]); // Re-run when id changes
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
return <div>{data}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
### Context and HOCs to Hooks
|
||||
```javascript
|
||||
// Before: Context consumer and HOC
|
||||
const ThemeContext = React.createContext();
|
||||
|
||||
class ThemedButton extends React.Component {
|
||||
static contextType = ThemeContext;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<button style={{ background: this.context.theme }}>
|
||||
{this.props.children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// After: useContext hook
|
||||
function ThemedButton({ children }) {
|
||||
const { theme } = useContext(ThemeContext);
|
||||
|
||||
return (
|
||||
<button style={{ background: theme }}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// Before: HOC for data fetching
|
||||
function withUser(Component) {
|
||||
return class extends React.Component {
|
||||
state = { user: null };
|
||||
|
||||
componentDidMount() {
|
||||
fetchUser().then(user => this.setState({ user }));
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Component {...this.props} user={this.state.user} />;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// After: Custom hook
|
||||
function useUser() {
|
||||
const [user, setUser] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUser().then(setUser);
|
||||
}, []);
|
||||
|
||||
return user;
|
||||
}
|
||||
|
||||
function UserProfile() {
|
||||
const user = useUser();
|
||||
if (!user) return <div>Loading...</div>;
|
||||
return <div>{user.name}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
## React 18 Concurrent Features
|
||||
|
||||
### New Root API
|
||||
```javascript
|
||||
// Before: React 17
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
|
||||
// After: React 18
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
const root = createRoot(document.getElementById('root'));
|
||||
root.render(<App />);
|
||||
```
|
||||
|
||||
### Automatic Batching
|
||||
```javascript
|
||||
// React 18: All updates are batched
|
||||
function handleClick() {
|
||||
setCount(c => c + 1);
|
||||
setFlag(f => !f);
|
||||
// Only one re-render (batched)
|
||||
}
|
||||
|
||||
// Even in async:
|
||||
setTimeout(() => {
|
||||
setCount(c => c + 1);
|
||||
setFlag(f => !f);
|
||||
// Still batched in React 18!
|
||||
}, 1000);
|
||||
|
||||
// Opt out if needed
|
||||
import { flushSync } from 'react-dom';
|
||||
|
||||
flushSync(() => {
|
||||
setCount(c => c + 1);
|
||||
});
|
||||
// Re-render happens here
|
||||
setFlag(f => !f);
|
||||
// Another re-render
|
||||
```
|
||||
|
||||
### Transitions
|
||||
```javascript
|
||||
import { useState, useTransition } from 'react';
|
||||
|
||||
function SearchResults() {
|
||||
const [query, setQuery] = useState('');
|
||||
const [results, setResults] = useState([]);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const handleChange = (e) => {
|
||||
// Urgent: Update input immediately
|
||||
setQuery(e.target.value);
|
||||
|
||||
// Non-urgent: Update results (can be interrupted)
|
||||
startTransition(() => {
|
||||
setResults(searchResults(e.target.value));
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<input value={query} onChange={handleChange} />
|
||||
{isPending && <Spinner />}
|
||||
<Results data={results} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Suspense for Data Fetching
|
||||
```javascript
|
||||
import { Suspense } from 'react';
|
||||
|
||||
// Resource-based data fetching (with React 18)
|
||||
const resource = fetchProfileData();
|
||||
|
||||
function ProfilePage() {
|
||||
return (
|
||||
<Suspense fallback={<Loading />}>
|
||||
<ProfileDetails />
|
||||
<Suspense fallback={<Loading />}>
|
||||
<ProfileTimeline />
|
||||
</Suspense>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function ProfileDetails() {
|
||||
// This will suspend if data not ready
|
||||
const user = resource.user.read();
|
||||
return <h1>{user.name}</h1>;
|
||||
}
|
||||
|
||||
function ProfileTimeline() {
|
||||
const posts = resource.posts.read();
|
||||
return <Timeline posts={posts} />;
|
||||
}
|
||||
```
|
||||
|
||||
## Codemods for Automation
|
||||
|
||||
### Run React Codemods
|
||||
```bash
|
||||
# Install jscodeshift
|
||||
npm install -g jscodeshift
|
||||
|
||||
# React 16.9 codemod (rename unsafe lifecycle methods)
|
||||
npx react-codeshift <transform> <path>
|
||||
|
||||
# Example: Rename UNSAFE_ methods
|
||||
npx react-codeshift --parser=tsx \
|
||||
--transform=react-codeshift/transforms/rename-unsafe-lifecycles.js \
|
||||
src/
|
||||
|
||||
# Update to new JSX Transform (React 17+)
|
||||
npx react-codeshift --parser=tsx \
|
||||
--transform=react-codeshift/transforms/new-jsx-transform.js \
|
||||
src/
|
||||
|
||||
# Class to Hooks (third-party)
|
||||
npx codemod react/hooks/convert-class-to-function src/
|
||||
```
|
||||
|
||||
### Custom Codemod Example
|
||||
```javascript
|
||||
// custom-codemod.js
|
||||
module.exports = function(file, api) {
|
||||
const j = api.jscodeshift;
|
||||
const root = j(file.source);
|
||||
|
||||
// Find setState calls
|
||||
root.find(j.CallExpression, {
|
||||
callee: {
|
||||
type: 'MemberExpression',
|
||||
property: { name: 'setState' }
|
||||
}
|
||||
}).forEach(path => {
|
||||
// Transform to useState
|
||||
// ... transformation logic
|
||||
});
|
||||
|
||||
return root.toSource();
|
||||
};
|
||||
|
||||
// Run: jscodeshift -t custom-codemod.js src/
|
||||
```
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### useMemo and useCallback
|
||||
```javascript
|
||||
function ExpensiveComponent({ items, filter }) {
|
||||
// Memoize expensive calculation
|
||||
const filteredItems = useMemo(() => {
|
||||
return items.filter(item => item.category === filter);
|
||||
}, [items, filter]);
|
||||
|
||||
// Memoize callback to prevent child re-renders
|
||||
const handleClick = useCallback((id) => {
|
||||
console.log('Clicked:', id);
|
||||
}, []); // No dependencies, never changes
|
||||
|
||||
return (
|
||||
<List items={filteredItems} onClick={handleClick} />
|
||||
);
|
||||
}
|
||||
|
||||
// Child component with memo
|
||||
const List = React.memo(({ items, onClick }) => {
|
||||
return items.map(item => (
|
||||
<Item key={item.id} item={item} onClick={onClick} />
|
||||
));
|
||||
});
|
||||
```
|
||||
|
||||
### Code Splitting
|
||||
```javascript
|
||||
import { lazy, Suspense } from 'react';
|
||||
|
||||
// Lazy load components
|
||||
const Dashboard = lazy(() => import('./Dashboard'));
|
||||
const Settings = lazy(() => import('./Settings'));
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Suspense fallback={<Loading />}>
|
||||
<Routes>
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## TypeScript Migration
|
||||
|
||||
```typescript
|
||||
// Before: JavaScript
|
||||
function Button({ onClick, children }) {
|
||||
return <button onClick={onClick}>{children}</button>;
|
||||
}
|
||||
|
||||
// After: TypeScript
|
||||
interface ButtonProps {
|
||||
onClick: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
function Button({ onClick, children }: ButtonProps) {
|
||||
return <button onClick={onClick}>{children}</button>;
|
||||
}
|
||||
|
||||
// Generic components
|
||||
interface ListProps<T> {
|
||||
items: T[];
|
||||
renderItem: (item: T) => React.ReactNode;
|
||||
}
|
||||
|
||||
function List<T>({ items, renderItem }: ListProps<T>) {
|
||||
return <>{items.map(renderItem)}</>;
|
||||
}
|
||||
```
|
||||
|
||||
## Migration Checklist
|
||||
|
||||
```markdown
|
||||
### Pre-Migration
|
||||
- [ ] Update dependencies incrementally (not all at once)
|
||||
- [ ] Review breaking changes in release notes
|
||||
- [ ] Set up testing suite
|
||||
- [ ] Create feature branch
|
||||
|
||||
### Class → Hooks Migration
|
||||
- [ ] Identify class components to migrate
|
||||
- [ ] Start with leaf components (no children)
|
||||
- [ ] Convert state to useState
|
||||
- [ ] Convert lifecycle to useEffect
|
||||
- [ ] Convert context to useContext
|
||||
- [ ] Extract custom hooks
|
||||
- [ ] Test thoroughly
|
||||
|
||||
### React 18 Upgrade
|
||||
- [ ] Update to React 17 first (if needed)
|
||||
- [ ] Update react and react-dom to 18
|
||||
- [ ] Update @types/react if using TypeScript
|
||||
- [ ] Change to createRoot API
|
||||
- [ ] Test with StrictMode (double invocation)
|
||||
- [ ] Address concurrent rendering issues
|
||||
- [ ] Adopt Suspense/Transitions where beneficial
|
||||
|
||||
### Performance
|
||||
- [ ] Identify performance bottlenecks
|
||||
- [ ] Add React.memo where appropriate
|
||||
- [ ] Use useMemo/useCallback for expensive operations
|
||||
- [ ] Implement code splitting
|
||||
- [ ] Optimize re-renders
|
||||
|
||||
### Testing
|
||||
- [ ] Update test utilities (React Testing Library)
|
||||
- [ ] Test with React 18 features
|
||||
- [ ] Check for warnings in console
|
||||
- [ ] Performance testing
|
||||
```
|
||||
|
||||
## Resources
|
||||
|
||||
- **references/breaking-changes.md**: Version-specific breaking changes
|
||||
- **references/codemods.md**: Codemod usage guide
|
||||
- **references/hooks-migration.md**: Comprehensive hooks patterns
|
||||
- **references/concurrent-features.md**: React 18 concurrent features
|
||||
- **assets/codemod-config.json**: Codemod configurations
|
||||
- **assets/migration-checklist.md**: Step-by-step checklist
|
||||
- **scripts/apply-codemods.sh**: Automated codemod script
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Incremental Migration**: Don't migrate everything at once
|
||||
2. **Test Thoroughly**: Comprehensive testing at each step
|
||||
3. **Use Codemods**: Automate repetitive transformations
|
||||
4. **Start Simple**: Begin with leaf components
|
||||
5. **Leverage StrictMode**: Catch issues early
|
||||
6. **Monitor Performance**: Measure before and after
|
||||
7. **Document Changes**: Keep migration log
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
- Forgetting useEffect dependencies
|
||||
- Over-using useMemo/useCallback
|
||||
- Not handling cleanup in useEffect
|
||||
- Mixing class and functional patterns
|
||||
- Ignoring StrictMode warnings
|
||||
- Breaking change assumptions
|
||||
Reference in New Issue
Block a user