Merge pull request #1 from rdlabo-team/feat/1.0.0

1.0.0

Author: rdlabo

README.md

@@ -2,9 +2,9 @@
 
 ## What is this?
 
-This library is used to uniquely group the ionIcons in a project and export them from `use-icons.ts`. In small projects, it is difficult to manage `addIcons()` of ionIcons each time, so we automated it.
+This library is used to uniquely group the ionIcons in a project, and generate for export ionIcons file. In small projects, it is difficult to manage `addIcons()` of ionIcons each time, so we automated it.
 
-- development: Stress-free development by `addIcons()` for all icons.
+- development: Stress-free development by add all icons at `addIcons`.
 - Production: Automatically collect and update the ionIcon used in the template prior to build.
 
 Of course, to maximize bundle size reduction, it is important to load a minimum number of icons at each Component lazy loading. This is a compromise to speed up development.
@@ -14,17 +14,32 @@ This project is based [ionic-team/ionic-angular-standalone-codemods](https://git
 > [!WARNING]
 > This project is experimental. Review all changes before committing them to your project.
 
-## Usage
 
-1. Run the CLI
+## Initialize
+
+__This is beta version.__
+
+```bash
+npm install @rdlabo/ionic-angular-collect-icons@beta --save-dev
+```
+
+### 🤖 Automatic Configuration
+
+```bash
+npx @rdlabo/ionic-angular-collect-icons --initialize true
+```
+
+### 📝 Manual Configuration
+
+#### 1. Run the CLI
 
 ```bash
 npx @rdlabo/ionic-angular-collect-icons
 ```
 
-This will overwrite `use-icons.ts` if it exists, or automatically generate `src/use-icons.ts` if not. If you wish to place this file in an arbitrary location, move it.
+This will generate `src/use-icons.ts`.
 
-2. Import the generated file in your `main.ts` ( or `app.config.ts` ) file:
+#### 2. Import the generated file in your `main.ts` ( or `app.config.ts` ) file:
 
 ```diff
 + import { addIcons } from 'ionicons';
@@ -38,22 +53,111 @@ This will overwrite `use-icons.ts` if it exists, or automatically generate `src/
 +  addIcons(environment.production ? useIcons : allIcons);
 ```
 
-- Can run addIcons in main.ts?
+#### 3. Remove other `addIcons` calls in class constructor
 
-Yes. Please check this issue: https://github.com/ionic-team/ionic-framework/issues/28445#issuecomment-1789028722
+```diff
+  @Component(/* ... */)
+  export class ExampleComponent {
+    constructor() {
+-     addIcons(useIcons);
+    }
+  }
+```
 
-> You're more than welcome to register them in main.ts or app.component.ts. You can then use them anywhere in your application. However, the initial bundle size may increase because the icons need to be loaded up front.
+## Usage
 
-3. Add npm script for generate `use-icons.ts` file at every build:
+```bash
+npx @rdlabo/ionic-angular-collect-icons
+```
+
+### Let's automate run
+
+It is inefficient to run commands each time before running a production build, so put them in an npm script to automate the process. Example: 
 
 ```diff
   "scripts": {
     "ng": "ng",
-    "start": "ng run serve",
-    "build": "ng build --localize",
-+   "prebuild": "npx @rdlabo/ionic-angular-collect-icons --non-interactive false",
+    "start": "ng serve",
+    "build": "ng build",
++   "prebuild": "npx @rdlabo/ionic-angular-collect-icons",
+```
+
+> [!WARNING]
+> This method cannot be used for production builds without using the npm script.
+
+## Optional
+
+### --interactive [boolean]
+
+If you want to set all CLI option using the prompts, set `true`. This can be used to check only the results in a Dry run.
+The default is `false`.
+
+```bash
+npx @rdlabo/ionic-angular-collect-icons --interactive true
 ```
 
+### --initialize [boolean]
+
+If you want to initialize `addIcons` automatically, you can use the `--initialize` flag. The default is `false`. The CLI add lines:
+
+```diff
++ import { addIcons } from 'ionicons';
++ import * as allIcons from 'ionicons/icons';
++ import * as useIcons from '../use-icons';
+
+  if (environment.production) {
+    enableProdMode();
+  }
+
++  addIcons(environment.production ? useIcons : allIcons);  
+```
+
+the CLI will add lines at the file that has `enableProdMode()`. Of course, it can also be set manually.
+
+And remove other `addIcons` calls in class constructor.
+
+```diff
+  @Component(/* ... */)
+  export class ExampleComponent {
+    constructor() {
+-     addIcons(useIcons);
+    }
+  }
+```
+
+```bash
+npx @rdlabo/ionic-angular-collect-icons --initialize true
+```
+
+### --project-path [string]
+
+If you want to specify the path to the project, you can use the `--project-path` flag. The default is the current directory.　
+
+```bash
+npx @rdlabo/ionic-angular-collect-icons --project-path /path/to/project
+```
+
+Target files are under the `src` directory from the specified path.
+- path/to/project + `src/**/*.ts`
+- path/to/project + `src/**/*.html`
+- path/to/project + `src/**/*.scss`
+
+### --icon-path [string]
+
+Default create file is (path/to/project +) `src/use-icons.ts`. If you want to specify the file name, you can use the `--icon-path` flag.
+
+```bash
+npx @rdlabo/ionic-angular-collect-icons  --icon-path src/other-use-icons.ts
+```
+
+## FAQ
+
+- Can run addIcons in main.ts?
+
+Yes. Please check this issue: https://github.com/ionic-team/ionic-framework/issues/28445#issuecomment-1789028722
+
+> You're more than welcome to register them in main.ts or app.component.ts. You can then use them anywhere in your application. However, the initial bundle size may increase because the icons need to be loaded up front.
+
 ## Developing
 
 1. Clone this repository.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdlabo/ionic-angular-collect-icons",
-  "version": "0.1.1",
+  "version": "1.0.0-beta.2",
   "repository": {
     "type": "git",
     "url": "[email protected]:rdlabo-team/ionic-angular-collect-icons.git"

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdlabo/ionic-angular-collect-icons",
-  "version": "0.1.1",
+  "version": "1.0.0-beta.2",
   "dependencies": {
     "@angular-eslint/template-parser": "^16.1.2",
     "@clack/core": "^0.3.3",

packages/cli/src/angular/migrations/standalone/0000-initialize-add-icons.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import { Project } from "ts-morph";
+import { dedent } from "ts-dedent";
+
+import { initializeAddIcons } from "./0000-initialize-add-icons";
+import {cwd} from 'node:process';
+
+describe("initializeAddIcons", () => {
+  it("initialize add icons to file", async () => {
+    const project = new Project({ useInMemoryFileSystem: true });
+
+    const appModuleSourceFile = project.createSourceFile(
+      cwd() + "/src/main.ts",
+      dedent(`
+      import { environment } from './environments/environment';
+      
+      if (environment.production) {
+        enableProdMode();
+      }
+      
+      bootstrapApplication(AppComponent, {
+        providers: [
+          { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+          provideIonicAngular(),
+          provideRouter(routes),
+        ],
+      });
+      `),
+    );
+
+    await initializeAddIcons(project, { dryRun: false, iconPath: "src/use-icons.ts", projectPath: cwd(), interactive: false, initialize: false });
+
+    expect(dedent(appModuleSourceFile.getText())).toBe(
+      dedent(`
+      import { environment } from './environments/environment';
+      import { addIcons } from "ionicons";
+      import * as allIcons from "ionicons/icons";
+      import * as useIcons from "use-icons";
+      
+      if (environment.production) {
+          enableProdMode();
+      }
+      addIcons(environment.production ? useIcons : allIcons);
+      
+      bootstrapApplication(AppComponent, {
+          providers: [
+              { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+              provideIonicAngular(),
+              provideRouter(routes),
+          ],
+      });
+      `));
+  });
+});

packages/cli/src/angular/migrations/standalone/0000-initialize-add-icons.ts

@@ -0,0 +1,61 @@
+import { Project, SyntaxKind, ts } from "ts-morph";
+import { CliOptions } from "../../../types/cli-options";
+
+import { saveFileChanges } from "../../utils/log-utils";
+import {addExportToFile, addImportToClass, addImportToFile} from '../../utils/typescript-utils';
+import {getRelativePath} from '../../utils/cli-utils';
+
+export const initializeAddIcons = async (
+  project: Project,
+  cliOptions: CliOptions,
+) => {
+  const prodModeSource = project.getSourceFile("app.config.ts") || project.getSourceFile("main.ts");
+
+  if (prodModeSource === undefined) {
+    // If the project does not base angular standalone structured, do nothing.
+    return;
+  }
+
+  const enableProdMode = prodModeSource.getStatements().find((source) => source.getFullText().includes('enableProdMode()'));
+  if (!enableProdMode) {
+    // If the project does not base angular standalone structured, do nothing.
+    return;
+  }
+
+  const importIonIcons = prodModeSource.getImportDeclaration("ionicons");
+  if (importIonIcons) {
+    const namedIconsImports = importIonIcons.getNamedImports();
+    const importIconSpecifier = namedIconsImports.find(
+      (n) => n.getName() === "addIcons",
+    );
+    if (importIconSpecifier) {
+      // Remove the addIcons import specifier.
+      const addIcons = prodModeSource.getStatements().find((l) => {
+        return l.getFullText().includes("addIcons");
+      });
+      if (addIcons) {
+        // already initialize
+        return;
+      } else {
+        // remove for initialize
+        importIconSpecifier.remove();
+      }
+    }
+  }
+
+  addImportToFile(prodModeSource, "addIcons", "ionicons");
+  prodModeSource.addImportDeclaration({
+    defaultImport: '* as allIcons',
+    moduleSpecifier: 'ionicons/icons'
+  });
+
+  const path = getRelativePath(prodModeSource.getFilePath(), [cliOptions.projectPath, cliOptions.iconPath].join('/'));
+  prodModeSource.addImportDeclaration({
+    defaultImport: '* as useIcons',
+    moduleSpecifier: path.replace('.ts', ''),
+  });
+
+  prodModeSource.insertStatements(enableProdMode.getChildIndex() + 1, `addIcons(environment.production ? useIcons : allIcons);`);
+
+  return await saveFileChanges(prodModeSource, cliOptions);
+};

packages/cli/src/angular/migrations/standalone/0001-remove-add-icons.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { Project } from "ts-morph";
+import { dedent } from "ts-dedent";
+
+import { removeAddIcons } from "./0001-remove-add-icons";
+import {cwd} from 'node:process';
+
+describe("migrateAppModule", () => {
+  it("should remove addIcons method", async () => {
+    const project = new Project({ useInMemoryFileSystem: true });
+
+    const component = `
+        import { Component } from "@angular/core";
+        import { addIcons } from "ionicons"; 
+        import { readerOutline } from "ionicons/icons"; 
+
+        @Component({
+          selector: 'my-component',
+          template: '',
+          standalone: true
+        }) 
+        export class MyComponent {
+          constructor() {
+            addIcons([readerOutline]);
+          }
+        }
+      `;
+
+    const componentSourceFile = project.createSourceFile(
+      "foo.component.ts",
+      dedent(component),
+    );
+
+    await removeAddIcons(project, { dryRun: false, iconPath: "src/use-icons.ts", projectPath: cwd(), interactive: false, initialize: false });
+
+    expect(dedent(componentSourceFile.getText())).toBe(
+      dedent(`
+        import { Component } from "@angular/core";
+
+        @Component({
+            selector: 'my-component',
+            template: '',
+            standalone: true
+        })
+        export class MyComponent {
+            constructor() {
+            }
+        }
+      `),
+    );
+  });
+});

packages/cli/src/angular/migrations/standalone/0001-remove-add-icons.ts

@@ -0,0 +1,38 @@
+import { Project, ts } from "ts-morph";
+import { CliOptions } from "../../../types/cli-options";
+
+import { saveFileChanges } from "../../utils/log-utils";
+
+export const removeAddIcons = async (
+  project: Project,
+  cliOptions: CliOptions,
+) => {
+  for (const sourceFile of project.getSourceFiles()) {
+    const importAddIcons = sourceFile.getImportDeclaration("ionicons");
+    if (!importAddIcons) {
+      // If the ionicons import does not exist, then this file do not use ion-icon
+      continue;
+    }
+    importAddIcons.remove();
+
+    const importIcons = sourceFile.getImportDeclaration("ionicons/icons");
+    if (importIcons) {
+      importIcons.remove();
+    }
+
+    const constructor = sourceFile.getClasses()[0]?.getConstructors()[0];
+    if (!constructor) {
+      // Create the constructor if it does not exist
+      continue;
+    }
+
+    const addIcons = constructor.getStatements().find((l) => {
+      return l.getFullText().includes("addIcons");
+    });
+
+    if (addIcons) {
+      addIcons.remove();
+    }
+    await saveFileChanges(sourceFile, cliOptions);
+  }
+};