@ng-annotate/angular 0.3.12 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-annotate/angular",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "schematics": "./schematics/collection.json",
   "description": "Angular library for ng-annotate-mcp — browser overlay for annotating components and routing instructions to an AI agent",
   "keywords": [
@@ -37,6 +37,8 @@
     "build": "ng-packagr -p ng-package.json && npm run build:schematics",
     "build:watch": "ng-packagr -p ng-package.json --watch",
     "build:schematics": "tsc -p schematics/tsconfig.json",
+    "test": "vitest run schematics",
+    "test:watch": "vitest schematics",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix"
   },
@@ -49,6 +51,7 @@
     "@angular/core": "^21.0.0",
     "ng-packagr": "^21.2.0",
     "rxjs": "^7.0.0",
-    "typescript": "~5.9.0"
+    "typescript": "~5.9.0",
+    "vitest": "^4.0.18"
   }
 }

package/schematics/ng-add/helpers.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertAfterLastImport = insertAfterLastImport;
+exports.insertIntoProviders = insertIntoProviders;
+/** Insert `newImport` on the line after the last import statement (handles multi-line imports and blank lines between groups). */
+function insertAfterLastImport(content, newImport) {
+    const lines = content.split('\n');
+    let lastImportLine = -1;
+    let inImport = false;
+    for (let i = 0; i < lines.length; i++) {
+        if (/^import\s/.test(lines[i]))
+            inImport = true;
+        if (inImport) {
+            lastImportLine = i;
+            if (lines[i].includes(';'))
+                inImport = false;
+        }
+    }
+    if (lastImportLine < 0)
+        return newImport + '\n' + content;
+    lines.splice(lastImportLine + 1, 0, newImport);
+    return lines.join('\n');
+}
+/** Insert `newProvider` as the first item in the `providers: [...]` array, preserving indentation style. */
+function insertIntoProviders(content, newProvider) {
+    return content.replace(/^(\s*)providers\s*:\s*\[/m, (match, indent) => {
+        return `${indent}providers: [\n${indent}  ${newProvider},`;
+    });
+}

package/schematics/ng-add/helpers.ts

@@ -0,0 +1,25 @@
+/** Insert `newImport` on the line after the last import statement (handles multi-line imports and blank lines between groups). */
+export function insertAfterLastImport(content: string, newImport: string): string {
+  const lines = content.split('\n');
+  let lastImportLine = -1;
+  let inImport = false;
+
+  for (let i = 0; i < lines.length; i++) {
+    if (/^import\s/.test(lines[i])) inImport = true;
+    if (inImport) {
+      lastImportLine = i;
+      if (lines[i].includes(';')) inImport = false;
+    }
+  }
+
+  if (lastImportLine < 0) return newImport + '\n' + content;
+  lines.splice(lastImportLine + 1, 0, newImport);
+  return lines.join('\n');
+}
+
+/** Insert `newProvider` as the first item in the `providers: [...]` array, preserving indentation style. */
+export function insertIntoProviders(content: string, newProvider: string): string {
+  return content.replace(/^(\s*)providers\s*:\s*\[/m, (match, indent) => {
+    return `${indent}providers: [\n${indent}  ${newProvider},`;
+  });
+}

package/schematics/ng-add/index.js

@@ -38,31 +38,7 @@ const schematics_1 = require("@angular-devkit/schematics");
 const tasks_1 = require("@angular-devkit/schematics/tasks");
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
-/** Insert `newImport` on the line after the last import statement (handles multi-line imports and blank lines between groups). */
-function insertAfterLastImport(content, newImport) {
-    const lines = content.split('\n');
-    let lastImportLine = -1;
-    let inImport = false;
-    for (let i = 0; i < lines.length; i++) {
-        if (/^import\s/.test(lines[i]))
-            inImport = true;
-        if (inImport) {
-            lastImportLine = i;
-            if (lines[i].includes(';'))
-                inImport = false;
-        }
-    }
-    if (lastImportLine < 0)
-        return newImport + '\n' + content;
-    lines.splice(lastImportLine + 1, 0, newImport);
-    return lines.join('\n');
-}
-/** Insert `newProvider` as the first item in the `providers: [...]` array, preserving indentation style. */
-function insertIntoProviders(content, newProvider) {
-    return content.replace(/^(\s*)providers\s*:\s*\[/m, (match, indent) => {
-        return `${indent}providers: [\n${indent}  ${newProvider},`;
-    });
-}
+const helpers_1 = require("./helpers");
 const MIN_ANGULAR_MAJOR = 21;
 function checkAngularVersion() {
     return (tree) => {
@@ -94,8 +70,15 @@ function addVitePlugin() {
             context.logger.info('@ng-annotate/vite-plugin vite plugin already present, skipping.');
             return;
         }
-        content = insertAfterLastImport(content, "import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';");
-        content = content.replace(/plugins\s*:\s*\[/, 'plugins: [...ngAnnotateMcp(), ');
+        content = (0, helpers_1.insertAfterLastImport)(content, "import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';");
+        if (/plugins\s*:\s*\[/.test(content)) {
+            // Existing plugins array — prepend into it
+            content = content.replace(/plugins\s*:\s*\[/, 'plugins: [...ngAnnotateMcp(), ');
+        }
+        else {
+            // No plugins array — inject one into defineConfig({...})
+            content = content.replace(/defineConfig\(\s*\{/, 'defineConfig({\n  plugins: [...ngAnnotateMcp()],');
+        }
         tree.overwrite(viteConfigPath, content);
         context.logger.info(`✅ Added ngAnnotateMcp() to ${viteConfigPath}`);
     };
@@ -119,8 +102,8 @@ function addProviders() {
             context.logger.info('provideNgAnnotate already present, skipping.');
             return;
         }
-        content = insertAfterLastImport(content, "import { provideNgAnnotate } from '@ng-annotate/angular';");
-        content = insertIntoProviders(content, 'provideNgAnnotate()');
+        content = (0, helpers_1.insertAfterLastImport)(content, "import { provideNgAnnotate } from '@ng-annotate/angular';");
+        content = (0, helpers_1.insertIntoProviders)(content, 'provideNgAnnotate()');
         tree.overwrite(appConfigPath, content);
         context.logger.info(`✅ Added provideNgAnnotate() to ${appConfigPath}`);
     };

package/schematics/ng-add/index.spec.ts

@@ -0,0 +1,186 @@
+import { describe, it, expect } from 'vitest';
+import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
+import { Tree } from '@angular-devkit/schematics';
+import * as path from 'path';
+import { insertAfterLastImport, insertIntoProviders } from './helpers';
+
+// ─── Helper unit tests ────────────────────────────────────────────────────────
+
+describe('insertAfterLastImport', () => {
+  it('inserts after a single import', () => {
+    const input = `import { Foo } from 'foo';\n\nexport const x = 1;\n`;
+    const result = insertAfterLastImport(input, "import { Bar } from 'bar';");
+    expect(result).toContain("import { Foo } from 'foo';\nimport { Bar } from 'bar';");
+  });
+
+  it('inserts after consecutive imports', () => {
+    const input = `import { A } from 'a';\nimport { B } from 'b';\n\nexport const x = 1;\n`;
+    const result = insertAfterLastImport(input, "import { C } from 'c';");
+    expect(result).toContain("import { B } from 'b';\nimport { C } from 'c';");
+    expect(result).not.toContain("import { A } from 'a';\nimport { C }");
+  });
+
+  it('inserts after last group when imports are separated by blank lines', () => {
+    const input = `import { A } from 'a';\nimport { B } from 'b';\n\nimport { C } from 'c';\n\nexport const x = 1;\n`;
+    const result = insertAfterLastImport(input, "import { D } from 'd';");
+    expect(result).toContain("import { C } from 'c';\nimport { D } from 'd';");
+  });
+
+  it('handles multi-line imports', () => {
+    const input = `import {\n  ApplicationConfig,\n  provideZoneChangeDetection,\n} from '@angular/core';\nimport { provideRouter } from '@angular/router';\n\nexport const x = 1;\n`;
+    const result = insertAfterLastImport(input, "import { provideNgAnnotate } from '@ng-annotate/angular';");
+    // Should insert after the last complete import, not inside the multi-line one
+    expect(result).toContain("import { provideRouter } from '@angular/router';\nimport { provideNgAnnotate }");
+    expect(result).not.toMatch(/import \{\nimport/);
+  });
+
+  it('prepends when no imports exist', () => {
+    const input = `export const x = 1;\n`;
+    const result = insertAfterLastImport(input, "import { Foo } from 'foo';");
+    expect(result).toMatch(/^import \{ Foo \}/);
+  });
+});
+
+describe('insertIntoProviders', () => {
+  it('inserts into inline providers array', () => {
+    const input = `export const appConfig = {\n  providers: [provideRouter(routes)],\n};\n`;
+    const result = insertIntoProviders(input, 'provideNgAnnotate()');
+    expect(result).toContain('providers: [\n    provideNgAnnotate(),');
+    expect(result).toContain('provideRouter(routes)');
+  });
+
+  it('inserts into multi-line providers array', () => {
+    const input = `export const appConfig = {\n  providers: [\n    provideRouter(routes),\n  ],\n};\n`;
+    const result = insertIntoProviders(input, 'provideNgAnnotate()');
+    expect(result).toContain('providers: [\n    provideNgAnnotate(),');
+  });
+
+  it('respects existing indentation', () => {
+    const input = `export const appConfig = {\n    providers: [provideRouter(routes)],\n};\n`;
+    const result = insertIntoProviders(input, 'provideNgAnnotate()');
+    expect(result).toContain('    providers: [\n      provideNgAnnotate(),');
+  });
+});
+
+// ─── Schematic integration tests ─────────────────────────────────────────────
+
+const collectionPath = path.join(__dirname, '../collection.json');
+const runner = new SchematicTestRunner('ng-annotate', collectionPath);
+
+const BASE_PKG = JSON.stringify({
+  dependencies: { '@angular/core': '^21.0.0' },
+  devDependencies: {},
+});
+
+async function runSchematic(tree: UnitTestTree): Promise<UnitTestTree> {
+  return runner.runSchematic('ng-add', { aiTool: 'claude-code' }, tree);
+}
+
+function makeTree(files: Record<string, string>): Tree {
+  const tree = Tree.empty();
+  for (const [filePath, content] of Object.entries(files)) {
+    tree.create(filePath, content);
+  }
+  return tree;
+}
+
+describe('ng-add schematic — addVitePlugin', () => {
+  it('creates vite.config.ts when none exists', async () => {
+    const tree = makeTree({ 'package.json': BASE_PKG });
+    const result = await runSchematic(tree);
+    expect(result.exists('vite.config.ts')).toBe(true);
+    const content = result.readText('vite.config.ts');
+    expect(content).toContain("import { ngAnnotateMcp } from '@ng-annotate/vite-plugin'");
+    expect(content).toContain('plugins: [...ngAnnotateMcp()]');
+  });
+
+  it('adds plugin to existing vite.config.ts with a plugins array', async () => {
+    const tree = makeTree({
+      'package.json': BASE_PKG,
+      'vite.config.ts': `import { defineConfig } from 'vite';\nimport { foo } from 'foo';\n\nexport default defineConfig({\n  plugins: [foo()],\n});\n`,
+    });
+    const result = await runSchematic(tree);
+    const content = result.readText('vite.config.ts');
+    expect(content).toContain("import { ngAnnotateMcp } from '@ng-annotate/vite-plugin'");
+    expect(content).toContain('plugins: [...ngAnnotateMcp(), ');
+  });
+
+  it('adds plugins array to vite.config.ts that has defineConfig({}) with no plugins', async () => {
+    const tree = makeTree({
+      'package.json': BASE_PKG,
+      'vite.config.ts': `import { defineConfig } from 'vite';\nimport { ngAnnotateMcp } from '@ng-annotate/vite-plugin';\n\nexport default defineConfig({});\n`,
+    });
+    // Already has the import but no plugins — should not be skipped
+    // Re-create without the import to test the injection path
+    const tree2 = makeTree({
+      'package.json': BASE_PKG,
+      'vite.config.ts': `import { defineConfig } from 'vite';\n\nexport default defineConfig({});\n`,
+    });
+    const result = await runSchematic(tree2);
+    const content = result.readText('vite.config.ts');
+    expect(content).toContain('plugins: [...ngAnnotateMcp()]');
+  });
+
+  it('skips when @ng-annotate/vite-plugin already present', async () => {
+    const original = `import { defineConfig } from 'vite';\nimport { ngAnnotateMcp } from '@ng-annotate/vite-plugin';\n\nexport default defineConfig({\n  plugins: [...ngAnnotateMcp()],\n});\n`;
+    const tree = makeTree({ 'package.json': BASE_PKG, 'vite.config.ts': original });
+    const result = await runSchematic(tree);
+    expect(result.readText('vite.config.ts')).toBe(original);
+  });
+});
+
+describe('ng-add schematic — addProviders', () => {
+  it('adds import and provideNgAnnotate() to standard app.config.ts', async () => {
+    const tree = makeTree({
+      'package.json': BASE_PKG,
+      'src/app/app.config.ts': `import { ApplicationConfig } from '@angular/core';\nimport { provideRouter } from '@angular/router';\n\nimport { routes } from './app.routes';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideRouter(routes)],\n};\n`,
+    });
+    const result = await runSchematic(tree);
+    const content = result.readText('src/app/app.config.ts');
+    expect(content).toContain("import { provideNgAnnotate } from '@ng-annotate/angular'");
+    expect(content).toContain('provideNgAnnotate()');
+  });
+
+  it('handles multi-line imports without breaking them', async () => {
+    const tree = makeTree({
+      'package.json': BASE_PKG,
+      'src/app/app.config.ts': `import {\n  ApplicationConfig,\n  provideZoneChangeDetection,\n} from '@angular/core';\nimport { provideRouter } from '@angular/router';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)],\n};\n`,
+    });
+    const result = await runSchematic(tree);
+    const content = result.readText('src/app/app.config.ts');
+    // Import should not be inserted inside the multi-line import block
+    expect(content).not.toMatch(/import \{\nimport/);
+    expect(content).toContain("import { provideNgAnnotate } from '@ng-annotate/angular'");
+    expect(content).toContain('provideNgAnnotate()');
+  });
+
+  it('skips when provideNgAnnotate already present', async () => {
+    const original = `import { provideNgAnnotate } from '@ng-annotate/angular';\n\nexport const appConfig = {\n  providers: [provideNgAnnotate()],\n};\n`;
+    const tree = makeTree({ 'package.json': BASE_PKG, 'src/app/app.config.ts': original });
+    const result = await runSchematic(tree);
+    expect(result.readText('src/app/app.config.ts')).toBe(original);
+  });
+});
+
+describe('ng-add schematic — addGitignore', () => {
+  it('creates .gitignore with .ng-annotate/ when none exists', async () => {
+    const tree = makeTree({ 'package.json': BASE_PKG });
+    const result = await runSchematic(tree);
+    expect(result.readText('.gitignore')).toContain('.ng-annotate/');
+  });
+
+  it('appends to existing .gitignore', async () => {
+    const tree = makeTree({ 'package.json': BASE_PKG, '.gitignore': 'node_modules/\ndist/\n' });
+    const result = await runSchematic(tree);
+    const content = result.readText('.gitignore');
+    expect(content).toContain('node_modules/');
+    expect(content).toContain('.ng-annotate/');
+  });
+
+  it('skips if .ng-annotate/ already in .gitignore', async () => {
+    const original = 'node_modules/\n.ng-annotate/\n';
+    const tree = makeTree({ 'package.json': BASE_PKG, '.gitignore': original });
+    const result = await runSchematic(tree);
+    expect(result.readText('.gitignore')).toBe(original);
+  });
+});

package/schematics/ng-add/index.ts

@@ -2,32 +2,7 @@ import { Rule, SchematicContext, Tree, chain, SchematicsException } from '@angul
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 import * as fs from 'fs';
 import * as path from 'path';
-
-/** Insert `newImport` on the line after the last import statement (handles multi-line imports and blank lines between groups). */
-function insertAfterLastImport(content: string, newImport: string): string {
-  const lines = content.split('\n');
-  let lastImportLine = -1;
-  let inImport = false;
-
-  for (let i = 0; i < lines.length; i++) {
-    if (/^import\s/.test(lines[i])) inImport = true;
-    if (inImport) {
-      lastImportLine = i;
-      if (lines[i].includes(';')) inImport = false;
-    }
-  }
-
-  if (lastImportLine < 0) return newImport + '\n' + content;
-  lines.splice(lastImportLine + 1, 0, newImport);
-  return lines.join('\n');
-}
-
-/** Insert `newProvider` as the first item in the `providers: [...]` array, preserving indentation style. */
-function insertIntoProviders(content: string, newProvider: string): string {
-  return content.replace(/^(\s*)providers\s*:\s*\[/m, (match, indent) => {
-    return `${indent}providers: [\n${indent}  ${newProvider},`;
-  });
-}
+import { insertAfterLastImport, insertIntoProviders } from './helpers';
 
 interface Options {
   aiTool: 'claude-code' | 'vscode' | 'both' | 'other';
@@ -78,7 +53,14 @@ function addVitePlugin(): Rule {
     }
 
     content = insertAfterLastImport(content, "import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';");
-    content = content.replace(/plugins\s*:\s*\[/, 'plugins: [...ngAnnotateMcp(), ');
+
+    if (/plugins\s*:\s*\[/.test(content)) {
+      // Existing plugins array — prepend into it
+      content = content.replace(/plugins\s*:\s*\[/, 'plugins: [...ngAnnotateMcp(), ');
+    } else {
+      // No plugins array — inject one into defineConfig({...})
+      content = content.replace(/defineConfig\(\s*\{/, 'defineConfig({\n  plugins: [...ngAnnotateMcp()],');
+    }
 
     tree.overwrite(viteConfigPath, content);
     context.logger.info(`✅ Added ngAnnotateMcp() to ${viteConfigPath}`);