|
| 1 | +# AI Agent Instructions for ng-in-viewport |
| 2 | + |
| 3 | +## Project Overview |
| 4 | + |
| 5 | +This is an Angular library for viewport detection using modern Angular v20+ patterns and signals. The library provides efficient viewport intersection detection using the Intersection Observer API. |
| 6 | + |
| 7 | +### Repository Structure |
| 8 | +- `projects/ng-in-viewport/` - Core library source code |
| 9 | +- `projects/demo/` - Demo application for documentation |
| 10 | +- `projects/example/` - Example application showing real-world usage |
| 11 | +- `e2e/` - End-to-end tests |
| 12 | +- `docs/` - Documentation files |
| 13 | + |
| 14 | +## Development Guidelines |
| 15 | + |
| 16 | +### Angular Standards |
| 17 | +- Use Angular v20+ features exclusively (signals, modern control flow) |
| 18 | +- All components must be standalone with OnPush change detection |
| 19 | +- Use signal-based APIs and computed values |
| 20 | +- Prefer `inject()` over constructor dependency injection |
| 21 | +- Use modern template syntax (`@if`, `@for`, `@switch`) |
| 22 | + |
| 23 | +### Code Quality |
| 24 | +- TypeScript strict mode enabled |
| 25 | +- ESLint and Prettier configured |
| 26 | +- Jest for unit testing |
| 27 | +- Playwright for E2E testing |
| 28 | +- 100% code coverage expected for library code |
| 29 | + |
| 30 | +### Key Commands |
| 31 | +```bash |
| 32 | +# Development |
| 33 | +npm run build:lib # Build library |
| 34 | +npm run test:lib # Test library |
| 35 | +npm run lint # Lint all projects |
| 36 | +npm run format # Check formatting |
| 37 | +npm run serve:demo # Run demo app (port 4200) |
| 38 | +npm run serve:example # Run example app (port 4300) |
| 39 | + |
| 40 | +# Testing |
| 41 | +npm run test # All tests with coverage |
| 42 | +npm run e2e:run # E2E tests headless |
| 43 | +npm run e2e:open # E2E tests with UI |
| 44 | +``` |
| 45 | + |
| 46 | +## Library Architecture |
| 47 | + |
| 48 | +### Core Components |
| 49 | +- `InViewportDirective` - Main directive for viewport detection |
| 50 | +- `InViewportService` - Service managing intersection observers |
| 51 | +- Signal-based state management throughout |
| 52 | + |
| 53 | +### Key Features |
| 54 | +- Intersection Observer API integration |
| 55 | +- Signal-based reactivity |
| 56 | +- SSR-compatible (graceful degradation) |
| 57 | +- TypeScript first with strict typing |
| 58 | +- Angular standalone components |
| 59 | + |
| 60 | +## Testing Strategy |
| 61 | + |
| 62 | +### Unit Tests |
| 63 | +- Test all public APIs |
| 64 | +- Mock Intersection Observer for browser compatibility |
| 65 | +- Test signal reactivity and computed values |
| 66 | +- Verify SSR compatibility |
| 67 | + |
| 68 | +### E2E Tests |
| 69 | +- Test real viewport interactions |
| 70 | +- Verify performance with many elements |
| 71 | +- Test responsive behavior |
| 72 | +- Validate accessibility |
| 73 | + |
| 74 | +## Performance Requirements |
| 75 | +- Library bundle size < 10KB gzipped |
| 76 | +- Zero runtime dependencies |
| 77 | +- Efficient memory usage with proper cleanup |
| 78 | +- 60fps performance during scroll operations |
| 79 | + |
| 80 | +## Compatibility |
| 81 | +- Angular 16+ (with standalone component support) |
| 82 | +- Modern browsers with Intersection Observer |
| 83 | +- Server-side rendering support |
| 84 | +- TypeScript 5.0+ |
| 85 | + |
| 86 | +## Contributing Guidelines |
| 87 | +- Follow conventional commits |
| 88 | +- Ensure all tests pass |
| 89 | +- Maintain code coverage |
| 90 | +- Update documentation for API changes |
| 91 | +- Use Angular best practices from latest version |
| 92 | + |
| 93 | +## AI Assistant Context |
| 94 | +When helping with this project: |
| 95 | +1. Always use modern Angular patterns (v20+ features) |
| 96 | +2. Prioritize performance and bundle size |
| 97 | +3. Maintain TypeScript strict compliance |
| 98 | +4. Ensure cross-browser compatibility |
| 99 | +5. Test thoroughly with provided test suites |
| 100 | +6. Follow the existing code patterns and architecture |
| 101 | + |
| 102 | +## Common Tasks |
| 103 | +- Adding new directive features |
| 104 | +- Optimizing intersection observer performance |
| 105 | +- Updating for new Angular versions |
| 106 | +- Enhancing TypeScript definitions |
| 107 | +- Improving test coverage |
| 108 | +- Updating documentation examples |
0 commit comments