Configure Angular MCP integration with official MCP server setup

Co-authored-by: k3nsei <[email protected]>

Author: Copilot

README.md

@@ -13,11 +13,11 @@
 
 ## Compatibility matrix 🔢
 
-| **ng-in-viewport** | **Angular**                                      |
-| ------------------ | ------------------------------------------------ |
+| **ng-in-viewport** | **Angular**                                     |
+| ------------------ | ----------------------------------------------- |
 | `16.1.x`           | `>= 17.x.y \|\| 18.x.y \|\| 19.x.y \|\| 20.x.y` |
-| `16.0.x`           | `16.x.y \|\| 15.x.y`                             |
-| `15.0.x`           | `15.x.y \|\| 14.x.y`                             |
+| `16.0.x`           | `16.x.y \|\| 15.x.y`                            |
+| `15.0.x`           | `15.x.y \|\| 14.x.y`                            |
 
 ## Support the Project 💖
 
@@ -31,6 +31,25 @@ By sponsoring, you'll help to:
 
 Every contribution makes a difference, and even a small gesture goes a long way in keeping `ng-in-viewport` up to date for the community.
 
+## Development 🛠️
+
+### Angular MCP Integration
+
+This project includes Model Context Protocol (MCP) integration for enhanced AI development assistance. The MCP configuration can be found in `mcp-config.json`:
+
+```json
+{
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+This configuration enables AI tools like Claude Desktop to interact with Angular CLI commands through the MCP protocol. For more information about Angular MCP, visit the [official documentation](https://angular.dev/ai/mcp).
+
 ## License 📝
 
 [MIT](https://github.com/k3nsei/ng-in-viewport/blob/stable/LICENSE)

e2e/demo/demo.spec.ts

@@ -69,11 +69,11 @@ test.describe('GIVEN: Demo Application', () => {
 async function assertColumnItems(page: any, column: 'first' | 'second', start: number, end?: number): Promise<void> {
   const items = page.locator(`.example--${column} .item`);
   const itemCount = await items.count();
-  
+
   for (let i = 0; i < itemCount; i++) {
     const item = items.nth(i);
     const number = i + 1;
-    
+
     if (inRange(number, start, end)) {
       await expect(item).toHaveClass(/item--active/);
     } else {
@@ -87,4 +87,4 @@ function inRange(value: number, start: number, end?: number): boolean {
     return value === start;
   }
   return value >= start && value <= end;
-}
+}

e2e/example/page-highlighting.spec.ts

@@ -18,4 +18,4 @@ test.describe('GIVEN: Example Application', () => {
       await expect(activeTab).toContainText('Highlighting');
     });
   });
-});
+});

eslint.config.js

@@ -12,12 +12,7 @@ const globals = require('globals');
 
 module.exports = [
   {
-    ignores: [
-      'dist/**',
-      'node_modules/**',
-      'coverage/**',
-      '*.d.ts',
-    ],
+    ignores: ['dist/**', 'node_modules/**', 'coverage/**', '*.d.ts'],
   },
   // Base config for TypeScript files
   {
@@ -37,57 +32,50 @@ module.exports = [
     plugins: {
       '@typescript-eslint': tseslint,
       '@angular-eslint': angular,
-      'import': importPlugin,
-      'prettier': prettier,
+      import: importPlugin,
+      prettier: prettier,
     },
     rules: {
       ...eslint.configs.recommended.rules,
       ...tseslint.configs.recommended.rules,
       ...angular.configs.recommended.rules,
       ...prettierConfig.rules,
-      
+
       // Import rules
       'sort-imports': [
         'error',
         {
-          'ignoreDeclarationSort': true,
-          'allowSeparatedGroups': true,
+          ignoreDeclarationSort: true,
+          allowSeparatedGroups: true,
         },
       ],
       'import/first': 'error',
       'import/order': [
         'error',
         {
-          'alphabetize': { 'order': 'asc', 'caseInsensitive': true },
+          alphabetize: { order: 'asc', caseInsensitive: true },
           'newlines-between': 'always',
-          'groups': [
-            ['builtin', 'external'],
-            'internal',
-            'parent',
-            ['sibling', 'index'],
-            'object',
-            'type',
-          ],
+          groups: [['builtin', 'external'], 'internal', 'parent', ['sibling', 'index'], 'object', 'type'],
         },
       ],
 
       // TypeScript rules
       '@typescript-eslint/no-unused-vars': [
         'error',
         {
-          'argsIgnorePattern': '^_',
-          'caughtErrors': 'all',
-          'caughtErrorsIgnorePattern': '^(_|ignore)',
-          'destructuredArrayIgnorePattern': '^_',
-          'ignoreRestSiblings': true,
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^(_|ignore)',
+          destructuredArrayIgnorePattern: '^_',
+          ignoreRestSiblings: true,
         },
       ],
       '@typescript-eslint/explicit-member-accessibility': [
         'error',
         {
-          'accessibility': 'explicit',
-          'overrides': {
-            'constructors': 'no-public',
+          accessibility: 'explicit',
+          overrides: {
+            constructors: 'no-public',
           },
         },
       ],
@@ -110,11 +98,11 @@ module.exports = [
     },
     plugins: {
       '@angular-eslint/template': angularTemplate,
-      'prettier': prettier,
+      prettier: prettier,
     },
     rules: {
       ...angularTemplate.configs.recommended.rules,
       'prettier/prettier': 'error',
     },
   },
-];
+];

mcp-config.json

@@ -0,0 +1,8 @@
+{
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}

playwright.config.ts

@@ -28,15 +28,15 @@ export default defineConfig({
   projects: [
     {
       name: 'demo-app-chromium',
-      use: { 
+      use: {
         ...devices['Desktop Chrome'],
         baseURL: 'http://localhost:4200',
       },
       testDir: './e2e/demo',
     },
     {
       name: 'example-app-chromium',
-      use: { 
+      use: {
         ...devices['Desktop Chrome'],
         baseURL: 'http://localhost:4300',
       },
@@ -57,4 +57,4 @@ export default defineConfig({
       reuseExistingServer: !process.env.CI,
     },
   ],
-});
+});

projects/ng-in-viewport/src/lib/services/in-viewport.service.ts

@@ -28,7 +28,9 @@ export class InViewportService {
 
   #getCache(): ObserverCache {
     if (!this.#cache) {
-      this.#cache = this.zone.runOutsideAngular(() => new ObserverCache((entries) => this.#onIntersectionEvent(entries)));
+      this.#cache = this.zone.runOutsideAngular(
+        () => new ObserverCache((entries) => this.#onIntersectionEvent(entries))
+      );
     }
     return this.#cache;
   }

projects/ng-in-viewport/src/lib/utils/observer-cache.spec.ts

@@ -38,16 +38,12 @@ vi.mock('./observer-cache-item', () => ({
 
 // Helper functions to check if any mock instance was called with the node
 function expectAnyAddNodeCalledWith(node: Element) {
-  const wasCalled = mockInstances.some(instance => 
-    instance.addNode.mock.calls.some(call => call[0] === node)
-  );
+  const wasCalled = mockInstances.some((instance) => instance.addNode.mock.calls.some((call) => call[0] === node));
   expect(wasCalled).toBe(true);
 }
 
 function expectAnyDeleteNodeCalledWith(node: Element) {
-  const wasCalled = mockInstances.some(instance => 
-    instance.deleteNode.mock.calls.some(call => call[0] === node)
-  );
+  const wasCalled = mockInstances.some((instance) => instance.deleteNode.mock.calls.some((call) => call[0] === node));
   expect(wasCalled).toBe(true);
 }
 

test-setup/global-mocks.ts

@@ -60,4 +60,4 @@ Object.defineProperty(global, 'IntersectionObserver', {
   writable: true,
   configurable: true,
   value: MockIntersectionObserver,
-});
+});