codeply-cli 0.3.0 → 0.4.0

package/skills/angular-developer/references/define-routes.md

@@ -1,67 +1,67 @@
-# Define Routes
-
-Routes are objects that define which component should render for a specific URL path.
-
-## Basic Configuration
-
-Define routes in a `Routes` array and provide them using `provideRouter` in your `appConfig`.
-
-```ts
-// app.routes.ts
-export const routes: Routes = [
-  {path: '', component: HomePage},
-  {path: 'admin', component: AdminPage},
-];
-
-// app.config.ts
-export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)],
-};
-```
-
-## URL Paths
-
-- **Static**: Matches an exact string (e.g., `'admin'`).
-- **Route Parameters**: Dynamic segments prefixed with a colon (e.g., `'user/:id'`).
-- **Wildcard**: Matches any URL using `**`. Useful for "Not Found" pages. **Always place at the end of the array.**
-
-## Matching Strategy
-
-Angular uses a **first-match wins** strategy. Specific routes must come before less specific ones.
-
-## Redirects
-
-Use `redirectTo` to point one path to another.
-
-```ts
-{ path: 'articles', redirectTo: '/blog' },
-{ path: 'blog', component: Blog },
-```
-
-## Page Titles
-
-Associate titles with routes for accessibility. Titles can be static or dynamic (via `ResolveFn` or a custom `TitleStrategy`).
-
-```ts
-{ path: 'home', component: Home, title: 'Home Page' }
-```
-
-## Route Data and Providers
-
-- **Static Data**: Attach metadata using the `data` property.
-- **Route Providers**: Scope dependencies to a specific route and its children using the `providers` array.
-
-## Nested (Child) Routes
-
-Define sub-views using the `children` property. Parent components must include a `<router-outlet />`.
-
-```ts
-{
-  path: 'product/:id',
-  component: Product,
-  children: [
-    { path: 'info', component: ProductInfo },
-    { path: 'reviews', component: ProductReviews },
-  ],
-}
-```
+# Define Routes
+
+Routes are objects that define which component should render for a specific URL path.
+
+## Basic Configuration
+
+Define routes in a `Routes` array and provide them using `provideRouter` in your `appConfig`.
+
+```ts
+// app.routes.ts
+export const routes: Routes = [
+  {path: '', component: HomePage},
+  {path: 'admin', component: AdminPage},
+];
+
+// app.config.ts
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)],
+};
+```
+
+## URL Paths
+
+- **Static**: Matches an exact string (e.g., `'admin'`).
+- **Route Parameters**: Dynamic segments prefixed with a colon (e.g., `'user/:id'`).
+- **Wildcard**: Matches any URL using `**`. Useful for "Not Found" pages. **Always place at the end of the array.**
+
+## Matching Strategy
+
+Angular uses a **first-match wins** strategy. Specific routes must come before less specific ones.
+
+## Redirects
+
+Use `redirectTo` to point one path to another.
+
+```ts
+{ path: 'articles', redirectTo: '/blog' },
+{ path: 'blog', component: Blog },
+```
+
+## Page Titles
+
+Associate titles with routes for accessibility. Titles can be static or dynamic (via `ResolveFn` or a custom `TitleStrategy`).
+
+```ts
+{ path: 'home', component: Home, title: 'Home Page' }
+```
+
+## Route Data and Providers
+
+- **Static Data**: Attach metadata using the `data` property.
+- **Route Providers**: Scope dependencies to a specific route and its children using the `providers` array.
+
+## Nested (Child) Routes
+
+Define sub-views using the `children` property. Parent components must include a `<router-outlet />`.
+
+```ts
+{
+  path: 'product/:id',
+  component: Product,
+  children: [
+    { path: 'info', component: ProductInfo },
+    { path: 'reviews', component: ProductReviews },
+  ],
+}
+```

package/skills/angular-developer/references/defining-providers.md

@@ -1,72 +1,72 @@
-# Defining Dependency Providers
-
-Angular offers automatic and manual ways to provide dependencies to its Dependency Injection (DI) system.
-
-## Automatic Provision
-
-The most common way to provide a service is using `providedIn: 'root'` on an `@Injectable()`.
-
-### InjectionToken
-
-Use `InjectionToken` for non-class dependencies (configuration objects, functions, primitives). An `InjectionToken` can also be automatically provided.
-
-```ts
-import {InjectionToken} from '@angular/core';
-
-export interface AppConfig {
-  apiUrl: string;
-}
-
-export const APP_CONFIG = new InjectionToken<AppConfig>('app.config', {
-  providedIn: 'root',
-  factory: () => ({apiUrl: 'https://api.example.com'}),
-});
-```
-
-## Manual Provision
-
-You use the `providers` array when a service lacks `providedIn`, when you want a new instance for a specific component, or when configuring runtime values.
-
-```ts
-@Component({
-  providers: [
-    // Shorthand for { provide: LocalService, useClass: LocalService }
-    LocalService,
-
-    // useClass: Swap implementations
-    {provide: Logger, useClass: BetterLogger},
-
-    // useValue: Provide static values
-    {provide: API_URL_TOKEN, useValue: 'https://api.example.com'},
-
-    // useFactory: Generate value dynamically
-    {
-      provide: ApiClient,
-      useFactory: (http = inject(HttpClient)) => new ApiClient(http),
-    },
-
-    // useExisting: Create an alias
-    {provide: OldLogger, useExisting: NewLogger},
-
-    // multi: Provide multiple values for the same token as an array
-    {provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true},
-  ],
-})
-export class Example {}
-```
-
-## Scopes of Providers
-
-- **Application Bootstrap**: Global singletons. Use for HTTP clients, logging, or app-wide config.
-- **Component/Directive**: Isolated instances. Use for component-specific state or forms. Services are destroyed when the component is destroyed.
-- **Route**: Feature-specific services loaded only with specific routes.
-
-## Library Pattern: `provide*` functions
-
-Library authors should export functions that return provider arrays to encapsulate configuration:
-
-```ts
-export function provideAnalytics(config: AnalyticsConfig): Provider[] {
-  return [{provide: ANALYTICS_CONFIG, useValue: config}, AnalyticsService];
-}
-```
+# Defining Dependency Providers
+
+Angular offers automatic and manual ways to provide dependencies to its Dependency Injection (DI) system.
+
+## Automatic Provision
+
+The most common way to provide a service is using `providedIn: 'root'` on an `@Injectable()`.
+
+### InjectionToken
+
+Use `InjectionToken` for non-class dependencies (configuration objects, functions, primitives). An `InjectionToken` can also be automatically provided.
+
+```ts
+import {InjectionToken} from '@angular/core';
+
+export interface AppConfig {
+  apiUrl: string;
+}
+
+export const APP_CONFIG = new InjectionToken<AppConfig>('app.config', {
+  providedIn: 'root',
+  factory: () => ({apiUrl: 'https://api.example.com'}),
+});
+```
+
+## Manual Provision
+
+You use the `providers` array when a service lacks `providedIn`, when you want a new instance for a specific component, or when configuring runtime values.
+
+```ts
+@Component({
+  providers: [
+    // Shorthand for { provide: LocalService, useClass: LocalService }
+    LocalService,
+
+    // useClass: Swap implementations
+    {provide: Logger, useClass: BetterLogger},
+
+    // useValue: Provide static values
+    {provide: API_URL_TOKEN, useValue: 'https://api.example.com'},
+
+    // useFactory: Generate value dynamically
+    {
+      provide: ApiClient,
+      useFactory: (http = inject(HttpClient)) => new ApiClient(http),
+    },
+
+    // useExisting: Create an alias
+    {provide: OldLogger, useExisting: NewLogger},
+
+    // multi: Provide multiple values for the same token as an array
+    {provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true},
+  ],
+})
+export class Example {}
+```
+
+## Scopes of Providers
+
+- **Application Bootstrap**: Global singletons. Use for HTTP clients, logging, or app-wide config.
+- **Component/Directive**: Isolated instances. Use for component-specific state or forms. Services are destroyed when the component is destroyed.
+- **Route**: Feature-specific services loaded only with specific routes.
+
+## Library Pattern: `provide*` functions
+
+Library authors should export functions that return provider arrays to encapsulate configuration:
+
+```ts
+export function provideAnalytics(config: AnalyticsConfig): Provider[] {
+  return [{provide: ANALYTICS_CONFIG, useValue: config}, AnalyticsService];
+}
+```

package/skills/angular-developer/references/di-fundamentals.md

@@ -1,120 +1,120 @@
-# Dependency Injection (DI) Fundamentals
-
-Dependency Injection (DI) is a design pattern used to organize and share code across an application by allowing you to "inject" features into different parts. This improves code maintainability, scalability, and testability.
-
-## How DI Works in Angular
-
-There are two primary ways code interacts with Angular's DI system:
-
-1. **Providing**: Making values (objects, functions, primitives) available to the DI system.
-2. **Injecting**: Asking the DI system for those values.
-
-Angular components, directives, and services automatically participate in DI.
-
-## Services
-
-A **service** is the most common way to share data and functionality across an application. It is a TypeScript class decorated with `@Injectable()`.
-
-### Creating a Service
-
-Use the `providedIn: 'root'` option in the `@Injectable` decorator to make the service a singleton available throughout the entire application. This is the recommended approach for most services.
-
-```ts
-import {Injectable} from '@angular/core';
-
-@Injectable({
-  providedIn: 'root', // Makes this a singleton available everywhere
-})
-export class AnalyticsLogger {
-  trackEvent(category: string, value: string) {
-    console.log('Analytics event logged:', {category, value});
-  }
-}
-```
-
-Common uses for services include:
-
-- Data clients (API calls)
-- State management
-- Authentication and authorization
-- Logging and error handling
-- Utility functions
-
-## Injecting Dependencies
-
-Use Angular's `inject()` function to request dependencies.
-
-### The `inject()` Function
-
-You can use the `inject()` function to get an instance of a service (or any other provided token).
-
-```ts
-import {Component, inject} from '@angular/core';
-import {Router} from '@angular/router';
-import {AnalyticsLogger} from './analytics-logger.service';
-
-@Component({
-  selector: 'app-navbar',
-  template: `<a href="#" (click)="navigateToDetail($event)">Detail Page</a>`,
-})
-export class Navbar {
-  // Injecting dependencies using class field initializers
-  private router = inject(Router);
-  private analytics = inject(AnalyticsLogger);
-
-  navigateToDetail(event: Event) {
-    event.preventDefault();
-    this.analytics.trackEvent('navigation', '/details');
-    this.router.navigate(['/details']);
-  }
-}
-```
-
-### Where can `inject()` be used? (Injection Context)
-
-You can call `inject()` in an **injection context**. The most common injection contexts are during the construction of a component, directive, or service.
-
-Valid places to call `inject()`:
-
-1. **Class field initializers** (Recommended)
-2. **Constructor body**
-3. **Route guards and resolvers** (which are executed in an injection context)
-4. **Factory functions** used in providers
-
-```typescript
-import {Component, Directive, Injectable, inject, ElementRef} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
-
-// 1. In a Component (Field Initializer & Constructor)
-@Component({
-  /*...*/
-})
-export class Example {
-  private service1 = inject(MyService); // Valid field initializer
-
-  private service2: MyService;
-  constructor() {
-    this.service2 = inject(MyService); // Valid constructor body
-  }
-}
-
-// 2. In a Directive
-@Directive({
-  /*...*/
-})
-export class MyDirective {
-  private element = inject(ElementRef); // Valid field initializer
-}
-
-// 3. In a Service
-@Injectable({providedIn: 'root'})
-export class MyService {
-  private http = inject(HttpClient); // Valid field initializer
-}
-
-// 4. In a Route Guard (Functional)
-export const authGuard = () => {
-  const auth = inject(AuthService); // Valid route guard
-  return auth.isAuthenticated();
-};
-```
+# Dependency Injection (DI) Fundamentals
+
+Dependency Injection (DI) is a design pattern used to organize and share code across an application by allowing you to "inject" features into different parts. This improves code maintainability, scalability, and testability.
+
+## How DI Works in Angular
+
+There are two primary ways code interacts with Angular's DI system:
+
+1. **Providing**: Making values (objects, functions, primitives) available to the DI system.
+2. **Injecting**: Asking the DI system for those values.
+
+Angular components, directives, and services automatically participate in DI.
+
+## Services
+
+A **service** is the most common way to share data and functionality across an application. It is a TypeScript class decorated with `@Injectable()`.
+
+### Creating a Service
+
+Use the `providedIn: 'root'` option in the `@Injectable` decorator to make the service a singleton available throughout the entire application. This is the recommended approach for most services.
+
+```ts
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root', // Makes this a singleton available everywhere
+})
+export class AnalyticsLogger {
+  trackEvent(category: string, value: string) {
+    console.log('Analytics event logged:', {category, value});
+  }
+}
+```
+
+Common uses for services include:
+
+- Data clients (API calls)
+- State management
+- Authentication and authorization
+- Logging and error handling
+- Utility functions
+
+## Injecting Dependencies
+
+Use Angular's `inject()` function to request dependencies.
+
+### The `inject()` Function
+
+You can use the `inject()` function to get an instance of a service (or any other provided token).
+
+```ts
+import {Component, inject} from '@angular/core';
+import {Router} from '@angular/router';
+import {AnalyticsLogger} from './analytics-logger.service';
+
+@Component({
+  selector: 'app-navbar',
+  template: `<a href="#" (click)="navigateToDetail($event)">Detail Page</a>`,
+})
+export class Navbar {
+  // Injecting dependencies using class field initializers
+  private router = inject(Router);
+  private analytics = inject(AnalyticsLogger);
+
+  navigateToDetail(event: Event) {
+    event.preventDefault();
+    this.analytics.trackEvent('navigation', '/details');
+    this.router.navigate(['/details']);
+  }
+}
+```
+
+### Where can `inject()` be used? (Injection Context)
+
+You can call `inject()` in an **injection context**. The most common injection contexts are during the construction of a component, directive, or service.
+
+Valid places to call `inject()`:
+
+1. **Class field initializers** (Recommended)
+2. **Constructor body**
+3. **Route guards and resolvers** (which are executed in an injection context)
+4. **Factory functions** used in providers
+
+```typescript
+import {Component, Directive, Injectable, inject, ElementRef} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+
+// 1. In a Component (Field Initializer & Constructor)
+@Component({
+  /*...*/
+})
+export class Example {
+  private service1 = inject(MyService); // Valid field initializer
+
+  private service2: MyService;
+  constructor() {
+    this.service2 = inject(MyService); // Valid constructor body
+  }
+}
+
+// 2. In a Directive
+@Directive({
+  /*...*/
+})
+export class MyDirective {
+  private element = inject(ElementRef); // Valid field initializer
+}
+
+// 3. In a Service
+@Injectable({providedIn: 'root'})
+export class MyService {
+  private http = inject(HttpClient); // Valid field initializer
+}
+
+// 4. In a Route Guard (Functional)
+export const authGuard = () => {
+  const auth = inject(AuthService); // Valid route guard
+  return auth.isAuthenticated();
+};
+```

package/skills/angular-developer/references/e2e-testing.md

@@ -1,56 +1,56 @@
-# End-to-End (E2E) Testing
-
-Use E2E tests to cover critical user journeys in a real browser. Prefer the framework already configured in the Angular workspace, such as Cypress or Playwright.
-
-## Running E2E Tests
-
-Check `package.json` and `angular.json` for the project-specific command. Common patterns include:
-
-```shell
-npm run e2e
-pnpm e2e
-ng e2e
-```
-
-When the app must be built or served first, use the existing project scripts instead of inventing a parallel test entrypoint.
-
-## Test Structure
-
-- Keep E2E specs close to the configured test framework, such as `cypress/e2e/` or `e2e/`.
-- Put reusable login/setup helpers in the framework support directory.
-- Keep fixtures explicit and small enough that each test can explain the user state it depends on.
-
-### Cypress Example
-
-```typescript
-describe('Login flow', () => {
-  it('redirects to dashboard on valid credentials', () => {
-    cy.visit('/login');
-    cy.get('[data-cy=email]').type('user@example.com');
-    cy.get('[data-cy=password]').type('password123');
-    cy.get('[data-cy=submit]').click();
-    cy.url().should('include', '/dashboard');
-  });
-});
-```
-
-### Playwright Example
-
-```typescript
-import {expect, test} from '@playwright/test';
-
-test('redirects to dashboard on valid credentials', async ({page}) => {
-  await page.goto('/login');
-  await page.getByLabel('Email').fill('user@example.com');
-  await page.getByLabel('Password').fill('password123');
-  await page.getByRole('button', {name: 'Sign in'}).click();
-  await expect(page).toHaveURL(/dashboard/);
-});
-```
-
-## Best Practices
-
-- Prefer accessible locators (`getByRole`, `getByLabel`) or stable `data-*` attributes.
-- Avoid selectors that depend on CSS classes, DOM depth, or incidental text.
-- Wait for specific UI states, routes, or network responses instead of arbitrary sleeps.
-- Keep smoke tests short and reserve full workflow coverage for the highest-value paths.
+# End-to-End (E2E) Testing
+
+Use E2E tests to cover critical user journeys in a real browser. Prefer the framework already configured in the Angular workspace, such as Cypress or Playwright.
+
+## Running E2E Tests
+
+Check `package.json` and `angular.json` for the project-specific command. Common patterns include:
+
+```shell
+npm run e2e
+pnpm e2e
+ng e2e
+```
+
+When the app must be built or served first, use the existing project scripts instead of inventing a parallel test entrypoint.
+
+## Test Structure
+
+- Keep E2E specs close to the configured test framework, such as `cypress/e2e/` or `e2e/`.
+- Put reusable login/setup helpers in the framework support directory.
+- Keep fixtures explicit and small enough that each test can explain the user state it depends on.
+
+### Cypress Example
+
+```typescript
+describe('Login flow', () => {
+  it('redirects to dashboard on valid credentials', () => {
+    cy.visit('/login');
+    cy.get('[data-cy=email]').type('user@example.com');
+    cy.get('[data-cy=password]').type('password123');
+    cy.get('[data-cy=submit]').click();
+    cy.url().should('include', '/dashboard');
+  });
+});
+```
+
+### Playwright Example
+
+```typescript
+import {expect, test} from '@playwright/test';
+
+test('redirects to dashboard on valid credentials', async ({page}) => {
+  await page.goto('/login');
+  await page.getByLabel('Email').fill('user@example.com');
+  await page.getByLabel('Password').fill('password123');
+  await page.getByRole('button', {name: 'Sign in'}).click();
+  await expect(page).toHaveURL(/dashboard/);
+});
+```
+
+## Best Practices
+
+- Prefer accessible locators (`getByRole`, `getByLabel`) or stable `data-*` attributes.
+- Avoid selectors that depend on CSS classes, DOM depth, or incidental text.
+- Wait for specific UI states, routes, or network responses instead of arbitrary sleeps.
+- Keep smoke tests short and reserve full workflow coverage for the highest-value paths.