feat(cli): support new control flow (#35)

* feat(cli): support new control flow

* feat(cli): support control flow of forLoop, switchBlock, and DeferredBlock

---------

Author: rdlabo

packages/cli/package.json

@@ -2,7 +2,7 @@
   "name": "@ionic/angular-standalone-codemods",
   "version": "0.0.7",
   "dependencies": {
-    "@angular-eslint/template-parser": "^16.1.2",
+    "@angular-eslint/template-parser": "^17.1.0",
     "@clack/core": "^0.3.3",
     "@clack/prompts": "^0.7.0",
     "@ionic/utils-terminal": "^2.3.4",

packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts

@@ -579,4 +579,103 @@ describe("migrateComponents", () => {
       );
     });
   });
+
+  it("should migrate components using inline templates with control flow", async () => {
+    const project = new Project({ useInMemoryFileSystem: true });
+
+    const component = `
+        import { Component } from "@angular/core";
+
+        @Component({
+          selector: 'my-component',
+          template: \`
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>My Component</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              @defer {
+              <ion-list>
+                @for (item of [0, 1, 2]; track item) {
+                <ion-item>
+                  @if (1 === 1){ <ion-icon name="logo-ionic" slot="start"></ion-icon> }
+                  @switch (flag) {
+                    @case(0) {
+                      <ion-label>My Item</ion-label>
+                    }
+                    @default {
+                      <ion-label>Your Item</ion-label>
+                    }
+                  }
+                </ion-item>
+                }
+              </ion-list>
+              } @loading (after 100ms; minimum 1s) {
+              <ion-icon name="reload-outline" slot="start"></ion-icon>
+              }
+            </ion-content>
+          \`,
+          standalone: true
+        }) 
+        export class MyComponent { flag = 1 }
+      `;
+
+    const componentSourceFile = project.createSourceFile(
+      "foo.component.ts",
+      dedent(component),
+    );
+
+    await migrateComponents(project, { dryRun: false });
+
+    expect(dedent(componentSourceFile.getText())).toBe(
+      dedent(`
+        import { Component } from "@angular/core";
+        import { addIcons } from "ionicons";
+        import { logoIonic, reloadOutline } from "ionicons/icons";
+        import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonIcon, IonLabel } from "@ionic/angular/standalone";
+
+        @Component({
+            selector: 'my-component',
+            template: \`
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>My Component</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              @defer {
+              <ion-list>
+                @for (item of [0, 1, 2]; track item) {
+                <ion-item>
+                  @if (1 === 1){ <ion-icon name="logo-ionic" slot="start"></ion-icon> }
+                  @switch (flag) {
+                    @case(0) {
+                      <ion-label>My Item</ion-label>
+                    }
+                    @default {
+                      <ion-label>Your Item</ion-label>
+                    }
+                  }
+                </ion-item>
+                }
+              </ion-list>
+              } @loading (after 100ms; minimum 1s) {
+              <ion-icon name="reload-outline" slot="start"></ion-icon>
+              }
+            </ion-content>
+          \`,
+            standalone: true,
+            imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonIcon, IonLabel]
+        })
+        export class MyComponent {
+            flag = 1
+
+            constructor() {
+                addIcons({ logoIonic, reloadOutline });
+            }
+        }
+      `),
+    );
+  });
 });

packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts

@@ -325,6 +325,38 @@ function detectIonicComponentsAndIcons(htmlAsString: string, filePath: string) {
           recursivelyFindIonicComponents(childNode);
         }
       }
+    } else if (node.type === "IfBlock") {
+      for (const branch of node.branches) {
+        for (const childNode of branch.children) {
+          recursivelyFindIonicComponents(childNode);
+        }
+      }
+    } else if (node.type === "ForLoopBlock") {
+      for (const childNode of node.children) {
+        recursivelyFindIonicComponents(childNode);
+      }
+    } else if (node.type === "SwitchBlock") {
+      for (const c of node.cases) {
+        for (const childNode of c.children) {
+          recursivelyFindIonicComponents(childNode);
+        }
+      }
+    } else if (node.type === "DeferredBlock") {
+      if (node.children) {
+        for (const childNode of node.children) {
+          recursivelyFindIonicComponents(childNode);
+        }
+      }
+
+      for (const childKey of Object.keys(node)) {
+        if (node[childKey]?.children) {
+          for (const childNode of node[childKey].children) {
+            recursivelyFindIonicComponents(Object.assign(childNode, {
+              type: childNode.constructor.name
+            }));
+          }
+        }
+      }
     }
   };