diff --git a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts b/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts index 67b1ad7..0f6a75c 100644 --- a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts +++ b/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts @@ -132,7 +132,7 @@ describe("migrateComponents", () => { @Component({ selector: 'my-component', - template: '', + template: '', standalone: true }) export class MyComponent { } @@ -149,18 +149,18 @@ describe("migrateComponents", () => { dedent(` import { Component } from "@angular/core"; import { addIcons } from "ionicons"; - import { logoIonic } from "ionicons/icons"; + import { logoIonic, add, remove } from "ionicons/icons"; import { IonIcon } from "@ionic/angular/standalone"; @Component({ selector: 'my-component', - template: '', + template: '', standalone: true, imports: [IonIcon] }) export class MyComponent { constructor() { - addIcons({ logoIonic }); + addIcons({ logoIonic, add, remove }); } } `), diff --git a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts b/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts index ece332e..0316123 100644 --- a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts +++ b/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts @@ -267,68 +267,70 @@ function detectIonicComponentsAndIcons(htmlAsString: string, filePath: string) { } if (node.name === "ion-icon") { - const staticNameAttribute = node.attributes.find( - (a: any) => a.name === "name" || a.name === "icon", - ); - - if (staticNameAttribute) { - const iconName = staticNameAttribute.value; - if (!ionIcons.includes(iconName)) { - ionIcons.push(iconName); - } - } else { - const boundNameAttribute = node.inputs.find( - (a: any) => a.name === "name" || a.name === "icon", + for (const attribute of ["name", "icon", "ios", "md"]) { + const staticNameAttribute = node.attributes.find( + (a: any) => a.name === attribute, ); - if (boundNameAttribute) { - const skippedIcon = node.sourceSpan.toString(); - - const iconNameRegex = /{{\s*'([^']+)'\s*}}/; - /** - * Attempt to find the icon name from the bound name attribute - * when the developer has a template like this: - * - */ - const iconNameMatch = skippedIcon.match(iconNameRegex); - - const deepGetIconConditional = ( - ast: typeof boundNameAttribute.value.ast, - icons: string[], - ): string[] => { - if (ast.trueExp.type === "LiteralPrimitive") { - if (!ionIcons.includes(ast.trueExp.value)) { - ionIcons.push(ast.trueExp.value); + if (staticNameAttribute) { + const iconName = staticNameAttribute.value; + if (!ionIcons.includes(iconName)) { + ionIcons.push(iconName); + } + } else { + const boundNameAttribute = node.inputs.find( + (a: any) => a.name === attribute, + ); + + if (boundNameAttribute) { + const skippedIcon = node.sourceSpan.toString(); + + const iconNameRegex = /{{\s*'([^']+)'\s*}}/; + /** + * Attempt to find the icon name from the bound name attribute + * when the developer has a template like this: + * + */ + const iconNameMatch = skippedIcon.match(iconNameRegex); + + const deepGetIconConditional = ( + ast: typeof boundNameAttribute.value.ast, + icons: string[], + ): string[] => { + if (ast.trueExp.type === "LiteralPrimitive") { + if (!ionIcons.includes(ast.trueExp.value)) { + ionIcons.push(ast.trueExp.value); + } + } else if (ast.trueExp.type === "Conditional") { + deepGetIconConditional(ast.trueExp, icons); + } else { + skippedIconsHtml.push(skippedIcon); } - } else if (ast.trueExp.type === "Conditional") { - deepGetIconConditional(ast.trueExp, icons); - } else { - skippedIconsHtml.push(skippedIcon); - } - if (ast.falseExp.type === "LiteralPrimitive") { - if (!ionIcons.includes(ast.falseExp.value)) { - ionIcons.push(ast.falseExp.value); + if (ast.falseExp.type === "LiteralPrimitive") { + if (!ionIcons.includes(ast.falseExp.value)) { + ionIcons.push(ast.falseExp.value); + } + } else if (ast.falseExp.type === "Conditional") { + deepGetIconConditional(ast.falseExp, icons); + } else { + skippedIconsHtml.push(skippedIcon); + } + return icons; + }; + + if (iconNameMatch) { + if (!ionIcons.includes(iconNameMatch[1])) { + ionIcons.push(iconNameMatch[1]); } - } else if (ast.falseExp.type === "Conditional") { - deepGetIconConditional(ast.falseExp, icons); + } else if (boundNameAttribute.value.ast.type === "Conditional") { + deepGetIconConditional(boundNameAttribute.value.ast, ionIcons); } else { + // IonIcon name is a calculated value from a variable or function. + // We can't determine the value of the name at this time. + // The developer will need to manually import these icons. skippedIconsHtml.push(skippedIcon); } - return icons; - }; - - if (iconNameMatch) { - if (!ionIcons.includes(iconNameMatch[1])) { - ionIcons.push(iconNameMatch[1]); - } - } else if (boundNameAttribute.value.ast.type === "Conditional") { - deepGetIconConditional(boundNameAttribute.value.ast, ionIcons); - } else { - // IonIcon name is a calculated value from a variable or function. - // We can't determine the value of the name at this time. - // The developer will need to manually import these icons. - skippedIconsHtml.push(skippedIcon); } } }