@silvestv/migration-planificator 3.0.0

package/dist/src/data/markdown/angular-migration-19-20.md

@@ -0,0 +1,521 @@
+# Guide Migration Angular 19→20 avec Exemples
+
+## 🔴 RÈGLES OBLIGATOIRES (Breaking Changes)
+
+### 1. Environnement & Dépendances
+```bash
+# ❌ Avant: TypeScript 5.5, Node.js 18.x
+# ✅ Après: 
+npm install typescript@~5.8.0
+# Node.js 20.11.1+ requis (PAS v18, ni v22.0-22.10)
+# Vérifier: node --version >= 20.11.1
+ng update @angular/core@20 @angular/cli@20
+ng update @angular/material@20  # Si Material utilisé
+```
+
+### 2. Renommages d'APIs critiques
+```typescript
+// ❌ Avant - Angular 19
+afterRender(() => { /* code */ });
+provideExperimentalCheckNoChangesForDebug();
+provideExperimentalZonelessChangeDetection();
+
+// ✅ Après - Angular 20
+afterEveryRender(() => { /* code */ });
+provideCheckNoChangesConfig(); // Note: useNgZoneOnStable supprimé
+provideZonelessChangeDetection();
+```
+
+### 3. Resource API - Changements de propriétés
+```typescript
+// ❌ Avant
+const userResource = resource({
+  request: () => ({id: userId()}),
+  loader: ({request}) => fetch(`/users/${request.id}`)
+});
+
+const rxResource = rxResource({
+  loader: () => httpClient.get('/data')
+});
+
+// ✅ Après
+const userResource = resource({
+  params: () => ({id: userId()}),  // request → params
+  loader: ({request}) => fetch(`/users/${request.id}`)
+});
+
+const rxResource = rxResource({
+  stream: () => httpClient.get('/data')  // loader → stream
+});
+```
+
+### 4. ResourceStatus n'est plus un enum
+```typescript
+// ❌ Avant
+import { ResourceStatus } from '@angular/core';
+if (resource.status() === ResourceStatus.Loading) { }
+
+// ✅ Après - Utiliser les strings
+if (resource.status() === 'loading') { }
+// Valeurs: 'idle' | 'loading' | 'resolved' | 'error' | 'reloading' | 'local'
+```
+
+### 5. Opérateurs JS dans templates
+```typescript
+// ❌ Avant - 'in' et 'void' comme propriétés
+@Component({
+  template: `{{ in }} {{ void }}`
+})
+class MyComponent {
+  in = 'value';
+  void = 'data';
+}
+
+// ✅ Après - Utiliser this pour éviter conflit
+@Component({
+  template: `{{ this.in }} {{ this.void }}`
+})
+// OU renommer les propriétés
+class MyComponent {
+  inValue = 'value';
+  voidData = 'data';
+}
+```
+
+### 6. TestBed.flushEffects() supprimé
+```typescript
+// ❌ Avant
+it('should test effects', () => {
+  TestBed.flushEffects();
+  expect(component.value).toBe('updated');
+});
+
+// ✅ Après
+it('should test effects', () => {
+  TestBed.tick(); // Plus proche équivalent
+  expect(component.value).toBe('updated');
+});
+```
+
+### 7. ng-reflect attributes supprimés
+```typescript
+// ❌ Avant - Dépendance sur ng-reflect-*
+const value = element.getAttribute('ng-reflect-disabled');
+
+// ✅ Après - Migration temporaire si nécessaire
+bootstrapApplication(App, {
+  providers: [
+    provideNgReflectAttributes() // Dev mode uniquement
+  ]
+});
+// Mais refactoriser le code pour ne pas en dépendre
+```
+
+### 8. Guards avec RedirectFn asynchrones
+```typescript
+// ❌ Avant
+const redirectFn: RedirectFn = () => '/login';
+
+// ✅ Après - Peut retourner Observable/Promise
+const redirectFn: RedirectFn = () => {
+  // Peut retourner:
+  return '/login'; // string
+  return of('/login'); // Observable
+  return Promise.resolve('/login'); // Promise
+};
+```
+
+### 9. Route Guards - Suppression du type 'any'
+```typescript
+// ❌ Avant
+const routes: Routes = [{
+  canActivate: ['authGuard'] // string deprecated
+}];
+
+// ✅ Après
+const routes: Routes = [{
+  canActivate: [AuthGuard] // ProviderToken<T> ou fonction
+}];
+```
+
+### 10. Parenthèses respectées dans templates
+```typescript
+// ❌ Avant - Fonctionnait par accident
+template: `{{ (foo?.bar).baz }}` // Ne crashait pas si foo null
+
+// ✅ Après - Comportement JS natif
+template: `{{ foo?.bar?.baz }}` // Utiliser optional chaining correctement
+// (foo?.bar).baz lancera une erreur si foo est null
+```
+
+### 11. TestBed.get() complètement supprimé
+```typescript
+// ❌ Avant
+const service = TestBed.get(MyService);
+
+// ✅ Après
+const service = TestBed.inject(MyService);
+```
+
+### 12. InjectFlags enum supprimé
+```typescript
+// ❌ Avant
+import { InjectFlags } from '@angular/core';
+inject(MyService, InjectFlags.Optional);
+
+// ✅ Après
+inject(MyService, { optional: true });
+```
+
+### 13. PendingTasks.run changements
+```typescript
+// ❌ Avant - Retour utilisé
+const result = await pendingTasks.run(() => promise);
+
+// ✅ Après - Utiliser add + gérer manuellement
+const taskId = pendingTasks.add();
+try {
+  const result = await promise;
+  // Gérer result
+} finally {
+  pendingTasks.remove(taskId);
+}
+```
+
+### 14. Erreurs AsyncPipe vers ErrorHandler
+```typescript
+// ❌ Avant - Erreurs silencieuses dans tests
+template: `{{ observableWithError$ | async }}`
+
+// ✅ Après - Erreurs reportées à ErrorHandler
+// Dans les tests:
+TestBed.configureTestingModule({
+  providers: [{
+    provide: ErrorHandler,
+    useValue: { handleError: jasmine.createSpy('handleError') }
+  }]
+});
+```
+
+---
+
+## 🟡 RÈGLES RECOMMANDÉES
+
+### 1. Dépréciation des directives structurelles
+```typescript
+// ⚠️ DÉPRÉCIÉ - Retrait prévu en v22
+<div *ngIf="condition">Content</div>
+<div *ngFor="let item of items">{{ item }}</div>
+<div [ngSwitch]="value">
+  <div *ngSwitchCase="'a'">A</div>
+</div>
+
+// ✅ Migration vers Control Flow
+@if (condition) {
+  <div>Content</div>
+}
+@for (item of items; track item.id) {
+  <div>{{ item }}</div>
+}
+@switch (value) {
+  @case ('a') { <div>A</div> }
+}
+
+// Migration automatique
+ng generate @angular/core:control-flow
+```
+
+### 2. APIs Signals stabilisées
+```typescript
+// ✅ Maintenant stables (plus de 'experimental')
+effect(() => {
+  console.log('Value changed:', mySignal());
+});
+
+const linked = linkedSignal({
+  source: sourceSignal,
+  computation: () => 'default'
+});
+
+const signalFromObs = toSignal(observable$, {
+  initialValue: 'default'
+});
+```
+
+### 3. Hydratation incrémentale stable
+```typescript
+// ✅ API stable
+bootstrapApplication(App, {
+  providers: [
+    provideClientHydration(withIncrementalHydration())
+  ]
+});
+
+// Dans les templates
+@defer (hydrate on viewport) {
+  <heavy-component />
+}
+```
+
+### 4. Configuration rendu par route stable
+```typescript
+// app.routes.server.ts - ✅ API stable
+export const serverRoutes: ServerRoute[] = [
+  { path: '/', renderMode: RenderMode.Prerender },
+  { path: '/api/**', renderMode: RenderMode.Server },
+  { path: '/admin/**', renderMode: RenderMode.Client },
+  {
+    path: '/product/:id',
+    renderMode: RenderMode.Prerender,
+    async getPrerenderParams() {
+      const ids = await getProductIds();
+      return ids.map(id => ({ id }));
+    }
+  }
+];
+```
+
+### 5. Zoneless avec gestion d'erreurs
+```typescript
+// ✅ Preview développeur avec error handling
+bootstrapApplication(App, {
+  providers: [
+    provideZonelessChangeDetection(),
+    provideBrowserGlobalErrorListeners() // Nouveau
+  ]
+});
+
+// Suppression zone.js de angular.json
+"polyfills": [
+  // "zone.js" ← Supprimer
+]
+```
+
+---
+
+## 🟢 RÈGLES OPTIONNELLES
+
+### 1. Nouvelles APIs Resource expérimentales
+```typescript
+// httpResource pour requêtes HTTP réactives
+const userResource = httpResource<User>(() => 
+  `https://api.example.com/users/${userId()}`
+);
+
+// Resource streaming
+const streamResource = resource({
+  stream: () => new Promise<Signal<ResourceStreamItem<Data>>>((resolve) => {
+    const result = signal<{ value: Data }>({ value: initialData });
+    
+    websocket.onmessage = (event) => {
+      result.update(current => ({
+        value: [...current.value, event.data]
+      }));
+    };
+    
+    resolve(result);
+  })
+});
+```
+
+### 2. createComponent avec bindings
+```typescript
+// Nouveau: directives et bindings dynamiques
+createComponent(MyDialog, {
+  bindings: [
+    inputBinding('title', titleSignal),
+    outputBinding('onClose', (result) => console.log(result)),
+    twoWayBinding('value', valueSignal)
+  ],
+  directives: [
+    FocusTrap,
+    {
+      type: HasColor,
+      bindings: [inputBinding('color', () => 'primary')]
+    }
+  ]
+});
+```
+
+### 3. Support Vitest expérimental
+```bash
+npm i vitest jsdom --save-dev
+```
+
+```json
+// angular.json
+"test": {
+  "builder": "@angular/build:unit-test",
+  "options": {
+    "runner": "vitest"
+  }
+}
+```
+
+### 4. Guide de style simplifié
+```bash
+# Plus de suffixes par défaut dans v20
+ng generate component user
+# Crée: user.ts (pas user.component.ts)
+
+# Pour garder les suffixes (projets existants)
+# ng update ajoutera automatiquement dans angular.json:
+```
+
+```json
+{
+  "schematics": {
+    "@schematics/angular:component": { "type": "component" }
+  }
+}
+```
+
+### 5. Host bindings avec type checking
+```typescript
+// tsconfig.json
+{
+  "angularCompilerOptions": {
+    "typeCheckHostBindings": true  // Activé par défaut en v21
+  }
+}
+
+// Maintenant avec vérification de type
+@Component({
+  host: {
+    '[class.active]': 'isActive()',  // Vérifié
+    '(click)': 'onClick($event)'     // Types vérifiés
+  }
+})
+```
+
+### 6. DatePipe avec avertissements
+```typescript
+// ⚠️ Avertissement si Y sans w
+{{ date | date:'Y' }}  // Suspect: année sans semaine
+
+// ✅ Correct
+{{ date | date:'y' }}     // Année standard
+{{ date | date:'Y w' }}   // Année et semaine ensemble
+```
+
+---
+
+## 📊 Checklist Migration Complète
+
+```typescript
+interface MigrationStatus20 {
+  obligatoire: {
+    nodeVersion: boolean;          // 20.11.1+
+    typescript58: boolean;         // v5.8+
+    apiRenames: boolean;          // afterEveryRender, etc.
+    resourceParams: boolean;      // request→params, loader→stream
+    resourceStatus: boolean;      // enum→string
+    templateOperators: boolean;   // this.in, this.void
+    testBedFlush: boolean;       // flushEffects→tick
+    ngReflect: boolean;          // Supprimer dépendances
+    redirectAsync: boolean;      // Support Observable/Promise
+    routeGuards: boolean;        // Pas de strings
+    parentheses: boolean;        // Respect JS natif
+    testBedGet: boolean;         // get→inject
+    injectFlags: boolean;        // enum→options
+    pendingTasks: boolean;       // run→add
+    asyncPipeErrors: boolean;    // ErrorHandler
+  };
+  recommandee: {
+    controlFlow: boolean;         // Migration *ngIf/*ngFor
+    signalsStable: boolean;      // effect, linkedSignal, toSignal
+    hydratationStable: boolean;  // Incremental hydration
+    renderModes: boolean;        // Server routes config
+    zoneless: boolean;           // Preview avec error handling
+  };
+  optionnelle: {
+    httpResource?: boolean;       // Nouvelle API
+    createComponent?: boolean;   // Bindings dynamiques
+    vitest?: boolean;            // Test runner
+    styleGuide?: boolean;        // Sans suffixes
+    hostBindings?: boolean;      // Type checking
+    datePipe?: boolean;          // Warnings Y/w
+  };
+}
+```
+
+## 🚀 Script Migration Automatisé
+
+```bash
+#!/bin/bash
+# migration-v20.sh
+
+echo "🔄 Angular 19 -> 20 Migration Starting..."
+
+# 1. Vérification Node.js
+NODE_VERSION=$(node -v | cut -d'v' -f2)
+if [[ ! "$NODE_VERSION" > "20.11.0" ]]; then
+  echo "❌ Node.js 20.11.1+ required"
+  exit 1
+fi
+
+# 2. Backup
+git checkout -b migration-angular-20
+git add . && git commit -m "Pre-migration v20 backup"
+
+# 3. Core updates
+echo "📦 Updating to Angular 20..."
+npm install typescript@~5.8.0
+ng update @angular/core@20 @angular/cli@20 --verbose
+ng update @angular/material@20
+
+# 4. Renommages automatiques
+echo "🔧 Applying renames..."
+find . -name "*.ts" -not -path "*/node_modules/*" | while read file; do
+  # API renames
+  sed -i 's/afterRender(/afterEveryRender(/g' "$file"
+  sed -i 's/provideExperimentalCheckNoChangesForDebug/provideCheckNoChangesConfig/g' "$file"
+  sed -i 's/provideExperimentalZonelessChangeDetection/provideZonelessChangeDetection/g' "$file"
+  sed -i 's/ExperimentalPendingTasks/PendingTasks/g' "$file"
+  
+  # TestBed migrations
+  sed -i 's/TestBed\.flushEffects()/TestBed.tick()/g' "$file"
+  sed -i 's/TestBed\.get(/TestBed.inject(/g' "$file"
+  
+  # Resource API
+  sed -i 's/request:/params:/g' "$file"
+  sed -i 's/loader:/stream:/g' "$file"
+  
+  # ResourceStatus enum to strings
+  sed -i 's/ResourceStatus\.Loading/'\''loading'\''/g' "$file"
+  sed -i 's/ResourceStatus\.Idle/'\''idle'\''/g' "$file"
+  sed -i 's/ResourceStatus\.Resolved/'\''resolved'\''/g' "$file"
+  sed -i 's/ResourceStatus\.Error/'\''error'\''/g' "$file"
+done
+
+# 5. Migration Control Flow (recommandée)
+echo "🎯 Migrating to Control Flow..."
+ng generate @angular/core:control-flow
+
+# 6. Tests
+echo "🧪 Running validation..."
+ng test --no-watch --code-coverage
+ng build --configuration production
+
+echo "✅ Migration complete! Check for TODOs:"
+grep -r "TODO" src/ | grep -v node_modules
+```
+
+## ⚠️ Points d'Attention
+
+| Catégorie | Risque | Solution | Vérification |
+|-----------|--------|----------|--------------|
+| Node.js | Version incompatible | v20.11.1+ obligatoire | `node -v` |
+| Parenthèses | Nullish coalescing crash | Corriger chaînage | Tests unitaires |
+| AsyncPipe | Erreurs cachées | Mock ErrorHandler | Tests passent |
+| Control Flow | Dépréciation v22 | Migrer maintenant | 0 *ngIf/*ngFor |
+| ng-reflect | Tests cassés | Refactorer ou provider | Pas de dépendance |
+| Zoneless | SSR errors | Error handlers | Tests SSR |
+
+## 📈 Métriques Cibles
+
+- **Performance**: +35% avec zoneless (cf YouTube)
+- **Bundle**: -20% sans Zone.js (~50KB)
+- **Tests**: +40% vitesse avec Vitest
+- **Hydratation**: -30% JavaScript initial
+- **DevTools**: Intégration Chrome native

package/dist/src/data/rules/rearchitecture/rearchitecture-rules.json

@@ -0,0 +1,66 @@
+[
+  {
+    "key": "split_large_components",
+    "summary": "Réorganiser composants/directives/pipes > 400 lignes en unités plus petites",
+    "description": "Les fichiers TypeScript contenant des composants, directives ou pipes de plus de 400 lignes doivent être réorganisés en unités plus petites et modulaires. Cette refactorisation améliore la maintenabilité, la testabilité et la réutilisabilité du code. Décomposer en sous-composants, extraire la logique métier dans des services, et séparer les préoccupations selon le principe de responsabilité unique.",
+    "estimated_time_per_occurrence": 150,
+    "onFile": null,
+    "fileTypes": [
+      "*.ts"
+    ],
+    "regex": "@(Component|Directive|Pipe)\\s*\\(",
+    "astPattern": {
+      "nodeType": "Decorator",
+      "name": [
+        "Component",
+        "Directive",
+        "Pipe"
+      ],
+      "excludeContext": [
+        "Comment",
+        "StringLiteral"
+      ],
+      "fileMatches": {
+        "minLines": 400
+      }
+    },
+    "category": "architecture",
+    "auto_fixable": false,
+    "migration_command": null,
+    "risk_level": "medium",
+    "code_description": "// Avant: composant monolithique (> 400 lignes)\n@Component({\n  selector: 'app-user-dashboard',\n  templateUrl: './user-dashboard.component.html'\n})\nexport class UserDashboardComponent {\n  // 400+ lignes de logique métier, UI, gestion état...\n}\n\n// Après: décomposition en sous-composants\n@Component({\n  selector: 'app-user-dashboard',\n  template: `\n    <app-user-profile [user]=\"user\"></app-user-profile>\n    <app-user-stats [stats]=\"stats\"></app-user-stats>\n    <app-user-actions [user]=\"user\"></app-user-actions>\n  `\n})\nexport class UserDashboardComponent {\n  // Orchestration uniquement (~50 lignes)\n  user = inject(UserService).currentUser;\n  stats = inject(UserStatsService).stats;\n}\n\n// + Extraire logique métier dans services\n// + Créer sous-composants spécialisés\n// + Séparer concerns (présentation, logique, état)",
+    "doc_url": "https://angular.dev/style-guide#single-responsibility"
+  },
+  {
+    "key": "split_large_functions",
+    "summary": "Refactoriser fonctions > 75 lignes pour réduire la complexité",
+    "description": "Les fonctions de plus de 75 lignes indiquent généralement une complexité excessive et violent le principe de responsabilité unique. Ces fonctions doivent être décomposées en sous-fonctions plus petites, plus lisibles et plus testables. Extraire les blocs logiques en fonctions distinctes, réduire le niveau d'imbrication et améliorer la séparation des préoccupations.",
+    "estimated_time_per_occurrence": 45,
+    "onFile": null,
+    "fileTypes": [
+      "*.ts"
+    ],
+    "regex": "(function\\s+\\w+|\\w+\\s*\\([^)]*\\)\\s*\\{|=>\\s*\\{)",
+    "astPattern": {
+      "nodeType": [
+        "FunctionDeclaration",
+        "MethodDeclaration",
+        "ArrowFunction",
+        "FunctionExpression"
+      ],
+      "excludeContext": [
+        "Comment",
+        "StringLiteral"
+      ],
+      "body": {
+        "minLines": 75
+      }
+    },
+    "category": "architecture",
+    "auto_fixable": false,
+    "migration_command": null,
+    "risk_level": "medium",
+    "code_description": "// Avant: fonction complexe (> 75 lignes)\nexport class UserService {\n  processUserData(user: User): ProcessedUser {\n    // 75+ lignes de logique\n    // - Validation\n    // - Transformation\n    // - Calculs\n    // - Formatage\n    // - Gestion erreurs\n    // ...\n  }\n}\n\n// Après: décomposition en fonctions plus petites\nexport class UserService {\n  processUserData(user: User): ProcessedUser {\n    const validated = this.validateUser(user);\n    const transformed = this.transformUserData(validated);\n    const calculated = this.calculateMetrics(transformed);\n    return this.formatOutput(calculated);\n  }\n\n  private validateUser(user: User): ValidatedUser {\n    // Validation uniquement (~10 lignes)\n  }\n\n  private transformUserData(user: ValidatedUser): TransformedUser {\n    // Transformation uniquement (~15 lignes)\n  }\n\n  private calculateMetrics(user: TransformedUser): CalculatedUser {\n    // Calculs uniquement (~20 lignes)\n  }\n\n  private formatOutput(user: CalculatedUser): ProcessedUser {\n    // Formatage uniquement (~10 lignes)\n  }\n}\n\n// Bénéfices:\n// - Chaque fonction a une responsabilité unique\n// - Code plus lisible et maintenable\n// - Tests unitaires plus faciles\n// - Réutilisation possible des sous-fonctions",
+    "doc_url": "https://angular.dev/style-guide#small-functions"
+  }
+]