codeply-cli 0.3.1 → 0.4.1

package/skills/angular-developer/references/resource.md

@@ -1,77 +1,77 @@
-# Async Reactivity with `resource`
-
-> [!IMPORTANT]
-> The `resource` API is currently experimental in Angular.
-
-A `Resource` incorporates asynchronous data fetching into Angular's signal-based reactivity. It executes an async loader function whenever its dependencies change, exposing the status and result as synchronous signals.
-
-## Basic Usage
-
-The `resource` function accepts an options object with two main properties:
-
-1. `params`: A reactive computation (like `computed`). When signals read here change, the resource re-fetches.
-2. `loader`: An async function that fetches data based on the parameters.
-
-```ts
-import { Component, resource, signal, computed } from '@angular/core';
-
-@Component({...})
-export class UserProfile {
-  userId = signal('123');
-
-  userResource = resource({
-    // Reactively tracking userId
-    params: () => ({ id: this.userId() }),
-
-    // Executes whenever params change
-    loader: async ({ params, abortSignal }) => {
-      const response = await fetch(`/api/users/${params.id}`, { signal: abortSignal });
-      if (!response.ok) throw new Error('Network error');
-      return response.json();
-    }
-  });
-
-  // Use the resource value in computed signals
-  userName = computed(() => {
-    if (this.userResource.hasValue()) {
-      return this.userResource.value()?.name;
-    } else {
-      return 'Loading...';
-    }
-  });
-}
-```
-
-## Aborting Requests
-
-If the `params` signal changes while a previous loader is still running, the `Resource` will attempt to abort the outstanding request using the provided `abortSignal`. **Always pass `abortSignal` to your `fetch` calls.**
-
-## Reloading Data
-
-You can imperatively force the resource to re-run the loader without the params changing by calling `.reload()`.
-
-```ts
-this.userResource.reload();
-```
-
-## Resource Status Signals
-
-The `Resource` object provides several signals to read its current state:
-
-- `value()`: The resolved data, or `undefined`.
-- `hasValue()`: Type-guard boolean. `true` if a value exists.
-- `isLoading()`: Boolean indicating if the loader is currently running.
-- `error()`: The error thrown by the loader, or `undefined`.
-- `status()`: A string constant representing the exact state (`'idle'`, `'loading'`, `'resolved'`, `'error'`, `'reloading'`, `'local'`).
-
-## Local Mutation
-
-You can optimistically update the resource's value directly. This changes the status to `'local'`.
-
-```ts
-this.userResource.value.set({name: 'Optimistic Update'});
-```
-
-## Reactive Data Fetching with `httpResource`
-
-If you are using Angular's `HttpClient`, prefer using `httpResource`. It is a specialized wrapper that leverages the Angular HTTP stack (including interceptors) while providing the same signal-based resource API.
+# Async Reactivity with `resource`
+
+> [!IMPORTANT]
+> The `resource` API is currently experimental in Angular.
+
+A `Resource` incorporates asynchronous data fetching into Angular's signal-based reactivity. It executes an async loader function whenever its dependencies change, exposing the status and result as synchronous signals.
+
+## Basic Usage
+
+The `resource` function accepts an options object with two main properties:
+
+1. `params`: A reactive computation (like `computed`). When signals read here change, the resource re-fetches.
+2. `loader`: An async function that fetches data based on the parameters.
+
+```ts
+import { Component, resource, signal, computed } from '@angular/core';
+
+@Component({...})
+export class UserProfile {
+  userId = signal('123');
+
+  userResource = resource({
+    // Reactively tracking userId
+    params: () => ({ id: this.userId() }),
+
+    // Executes whenever params change
+    loader: async ({ params, abortSignal }) => {
+      const response = await fetch(`/api/users/${params.id}`, { signal: abortSignal });
+      if (!response.ok) throw new Error('Network error');
+      return response.json();
+    }
+  });
+
+  // Use the resource value in computed signals
+  userName = computed(() => {
+    if (this.userResource.hasValue()) {
+      return this.userResource.value()?.name;
+    } else {
+      return 'Loading...';
+    }
+  });
+}
+```
+
+## Aborting Requests
+
+If the `params` signal changes while a previous loader is still running, the `Resource` will attempt to abort the outstanding request using the provided `abortSignal`. **Always pass `abortSignal` to your `fetch` calls.**
+
+## Reloading Data
+
+You can imperatively force the resource to re-run the loader without the params changing by calling `.reload()`.
+
+```ts
+this.userResource.reload();
+```
+
+## Resource Status Signals
+
+The `Resource` object provides several signals to read its current state:
+
+- `value()`: The resolved data, or `undefined`.
+- `hasValue()`: Type-guard boolean. `true` if a value exists.
+- `isLoading()`: Boolean indicating if the loader is currently running.
+- `error()`: The error thrown by the loader, or `undefined`.
+- `status()`: A string constant representing the exact state (`'idle'`, `'loading'`, `'resolved'`, `'error'`, `'reloading'`, `'local'`).
+
+## Local Mutation
+
+You can optimistically update the resource's value directly. This changes the status to `'local'`.
+
+```ts
+this.userResource.value.set({name: 'Optimistic Update'});
+```
+
+## Reactive Data Fetching with `httpResource`
+
+If you are using Angular's `HttpClient`, prefer using `httpResource`. It is a specialized wrapper that leverages the Angular HTTP stack (including interceptors) while providing the same signal-based resource API.

package/skills/angular-developer/references/route-animations.md

@@ -1,56 +1,56 @@
-# Route Transition Animations
-
-Angular Router supports the browser's **View Transitions API** for smooth visual transitions between routes.
-
-## Enabling View Transitions
-
-Add `withViewTransitions()` to your router configuration.
-
-```ts
-provideRouter(routes, withViewTransitions());
-```
-
-This is a **progressive enhancement**. In browsers that don't support the API, the router will still work but without the transition animation.
-
-## How it Works
-
-1. Browser takes a screenshot of the old state.
-2. Router updates the DOM (activates new component).
-3. Browser takes a screenshot of the new state.
-4. Browser animates between the two states.
-
-## Customizing with CSS
-
-Transitions are customized in **global CSS files** (not component-scoped CSS).
-
-Use the `::view-transition-old()` and `::view-transition-new()` pseudo-elements.
-
-```css
-/* Example: Cross-fade + Slide */
-::view-transition-old(root) {
-  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
-}
-::view-transition-new(root) {
-  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
-}
-```
-
-## Advanced Control
-
-Use `onViewTransitionCreated` to skip transitions or customize behavior based on the navigation context.
-
-```ts
-withViewTransitions({
-  onViewTransitionCreated: ({transition, from, to}) => {
-    // Skip animation for specific routes
-    if (to.url === '/no-animation') {
-      transition.skipTransition();
-    }
-  },
-});
-```
-
-## Best Practices
-
-- **Global Styles**: Always define transition animations in `styles.css` to avoid view encapsulation issues.
-- **View Transition Names**: Assign unique `view-transition-name` to elements that should transition smoothly across routes (e.g., a header image).
+# Route Transition Animations
+
+Angular Router supports the browser's **View Transitions API** for smooth visual transitions between routes.
+
+## Enabling View Transitions
+
+Add `withViewTransitions()` to your router configuration.
+
+```ts
+provideRouter(routes, withViewTransitions());
+```
+
+This is a **progressive enhancement**. In browsers that don't support the API, the router will still work but without the transition animation.
+
+## How it Works
+
+1. Browser takes a screenshot of the old state.
+2. Router updates the DOM (activates new component).
+3. Browser takes a screenshot of the new state.
+4. Browser animates between the two states.
+
+## Customizing with CSS
+
+Transitions are customized in **global CSS files** (not component-scoped CSS).
+
+Use the `::view-transition-old()` and `::view-transition-new()` pseudo-elements.
+
+```css
+/* Example: Cross-fade + Slide */
+::view-transition-old(root) {
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
+}
+::view-transition-new(root) {
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
+}
+```
+
+## Advanced Control
+
+Use `onViewTransitionCreated` to skip transitions or customize behavior based on the navigation context.
+
+```ts
+withViewTransitions({
+  onViewTransitionCreated: ({transition, from, to}) => {
+    // Skip animation for specific routes
+    if (to.url === '/no-animation') {
+      transition.skipTransition();
+    }
+  },
+});
+```
+
+## Best Practices
+
+- **Global Styles**: Always define transition animations in `styles.css` to avoid view encapsulation issues.
+- **View Transition Names**: Assign unique `view-transition-name` to elements that should transition smoothly across routes (e.g., a header image).

package/skills/angular-developer/references/route-guards.md

@@ -1,52 +1,52 @@
-# Route Guards
-
-Route guards control whether a user can navigate to or leave a route.
-
-## Types of Guards
-
-- **`CanActivate`**: Can the user access this route? (e.g., Auth check).
-- **`CanActivateChild`**: Can the user access children of this route?
-- **`CanDeactivate`**: Can the user leave this route? (e.g., Unsaved changes).
-- **`CanMatch`**: Should this route even be considered for matching? (e.g., Feature flags). If it returns `false`, the router continues checking other routes.
-
-## Creating a Guard
-
-Guards are typically functional since Angular 15.
-
-```ts
-export const authGuard: CanActivateFn = (route, state) => {
-  const authService = inject(AuthService);
-  const router = inject(Router);
-
-  if (authService.isLoggedIn()) {
-    return true;
-  }
-
-  // Redirect to login
-  return router.parseUrl('/login');
-};
-```
-
-## Applying Guards
-
-Add them to the route configuration as an array. They execute in order.
-
-```ts
-{
-  path: 'admin',
-  component: Admin,
-  canActivate: [authGuard],
-  canActivateChild: [adminChildGuard],
-  canDeactivate: [unsavedChangesGuard]
-}
-```
-
-## Return Values
-
-- `boolean`: `true` to allow, `false` to block.
-- `UrlTree` or `RedirectCommand`: Redirect to a different route.
-- `Observable` or `Promise`: Resolves to the above types.
-
-## Security Note
-
-**Client-side guards are NOT a substitute for server-side security.** Always verify permissions on the server.
+# Route Guards
+
+Route guards control whether a user can navigate to or leave a route.
+
+## Types of Guards
+
+- **`CanActivate`**: Can the user access this route? (e.g., Auth check).
+- **`CanActivateChild`**: Can the user access children of this route?
+- **`CanDeactivate`**: Can the user leave this route? (e.g., Unsaved changes).
+- **`CanMatch`**: Should this route even be considered for matching? (e.g., Feature flags). If it returns `false`, the router continues checking other routes.
+
+## Creating a Guard
+
+Guards are typically functional since Angular 15.
+
+```ts
+export const authGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService.isLoggedIn()) {
+    return true;
+  }
+
+  // Redirect to login
+  return router.parseUrl('/login');
+};
+```
+
+## Applying Guards
+
+Add them to the route configuration as an array. They execute in order.
+
+```ts
+{
+  path: 'admin',
+  component: Admin,
+  canActivate: [authGuard],
+  canActivateChild: [adminChildGuard],
+  canDeactivate: [unsavedChangesGuard]
+}
+```
+
+## Return Values
+
+- `boolean`: `true` to allow, `false` to block.
+- `UrlTree` or `RedirectCommand`: Redirect to a different route.
+- `Observable` or `Promise`: Resolves to the above types.
+
+## Security Note
+
+**Client-side guards are NOT a substitute for server-side security.** Always verify permissions on the server.

package/skills/angular-developer/references/router-lifecycle.md

@@ -1,45 +1,45 @@
-# Router Lifecycle and Events
-
-Angular Router emits events through the `Router.events` observable, allowing you to track the navigation lifecycle from start to finish.
-
-## Common Router Events (Chronological)
-
-1. **`NavigationStart`**: Navigation begins.
-2. **`RoutesRecognized`**: Router matches the URL to a route.
-3. **`GuardsCheckStart` / `End`**: Evaluation of `canActivate`, `canMatch`, etc.
-4. **`ResolveStart` / `End`**: Data resolution phase (fetching data via resolvers).
-5. **`NavigationEnd`**: Navigation completed successfully.
-6. **`NavigationCancel`**: Navigation canceled (e.g., guard returned `false`).
-7. **`NavigationError`**: Navigation failed (e.g., error in resolver).
-
-## Subscribing to Events
-
-Inject the `Router` and filter the `events` observable.
-
-```ts
-import {Router, NavigationStart, NavigationEnd} from '@angular/router';
-
-export class MyService {
-  private router = inject(Router);
-
-  constructor() {
-    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => {
-      console.log('Navigated to:', event.url);
-    });
-  }
-}
-```
-
-## Debugging
-
-Enable detailed console logging of all routing events during application bootstrap.
-
-```ts
-provideRouter(routes, withDebugTracing());
-```
-
-## Common Use Cases
-
-- **Loading Indicators**: Show a spinner when `NavigationStart` fires and hide it on `NavigationEnd`/`Cancel`/`Error`.
-- **Analytics**: Track page views by listening for `NavigationEnd`.
-- **Scroll Management**: Respond to `Scroll` events for custom scroll behavior.
+# Router Lifecycle and Events
+
+Angular Router emits events through the `Router.events` observable, allowing you to track the navigation lifecycle from start to finish.
+
+## Common Router Events (Chronological)
+
+1. **`NavigationStart`**: Navigation begins.
+2. **`RoutesRecognized`**: Router matches the URL to a route.
+3. **`GuardsCheckStart` / `End`**: Evaluation of `canActivate`, `canMatch`, etc.
+4. **`ResolveStart` / `End`**: Data resolution phase (fetching data via resolvers).
+5. **`NavigationEnd`**: Navigation completed successfully.
+6. **`NavigationCancel`**: Navigation canceled (e.g., guard returned `false`).
+7. **`NavigationError`**: Navigation failed (e.g., error in resolver).
+
+## Subscribing to Events
+
+Inject the `Router` and filter the `events` observable.
+
+```ts
+import {Router, NavigationStart, NavigationEnd} from '@angular/router';
+
+export class MyService {
+  private router = inject(Router);
+
+  constructor() {
+    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => {
+      console.log('Navigated to:', event.url);
+    });
+  }
+}
+```
+
+## Debugging
+
+Enable detailed console logging of all routing events during application bootstrap.
+
+```ts
+provideRouter(routes, withDebugTracing());
+```
+
+## Common Use Cases
+
+- **Loading Indicators**: Show a spinner when `NavigationStart` fires and hide it on `NavigationEnd`/`Cancel`/`Error`.
+- **Analytics**: Track page views by listening for `NavigationEnd`.
+- **Scroll Management**: Respond to `Scroll` events for custom scroll behavior.

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

@@ -1,87 +1,87 @@
-# Testing with the RouterTestingHarness
-
-When testing components that involve routing, it is crucial **not to mock the Router or related services**. Instead, use the `RouterTestingHarness`, which provides a robust and reliable way to test routing logic in an environment that closely mirrors a real application.
-
-Using the harness ensures you are testing the actual router configuration, guards, and resolvers, leading to more meaningful tests.
-
-## Setting Up for Router Testing
-
-The `RouterTestingHarness` is the primary tool for testing routing scenarios. You also need to provide your test routes using the `provideRouter` function in your `TestBed` configuration.
-
-### Example Setup
-
-```ts
-import {TestBed} from '@angular/core/testing';
-import {provideRouter} from '@angular/router';
-import {RouterTestingHarness} from '@angular/router/testing';
-import {Dashboard} from './dashboard.component';
-import {HeroDetail} from './hero-detail.component';
-
-describe('Dashboard Component Routing', () => {
-  let harness: RouterTestingHarness;
-
-  beforeEach(async () => {
-    // 1. Configure TestBed with test routes
-    await TestBed.configureTestingModule({
-      providers: [
-        // Use provideRouter with your test-specific routes
-        provideRouter([
-          {path: '', component: Dashboard},
-          {path: 'heroes/:id', component: HeroDetail},
-        ]),
-      ],
-    }).compileComponents();
-
-    // 2. Create the RouterTestingHarness
-    harness = await RouterTestingHarness.create();
-  });
-});
-```
-
-### Key Concepts
-
-1. **`provideRouter([...])`**: Provide a test-specific routing configuration. This should include the routes necessary for the component-under-test to function correctly.
-2. **`RouterTestingHarness.create()`**: Asynchronously creates and initializes the harness and performs an initial navigation to the root URL (`/`).
-
-## Writing Router Tests
-
-Once the harness is created, you can use it to drive navigation and make assertions on the state of the router and the activated components.
-
-### Example: Testing Navigation
-
-```ts
-it('should navigate to a hero detail when a hero is selected', async () => {
-  // 1. Navigate to the initial component and get its instance
-  const dashboard = await harness.navigateByUrl('/', Dashboard);
-
-  // Suppose the dashboard has a method to select a hero
-  const heroToSelect = {id: 42, name: 'Test Hero'};
-  dashboard.selectHero(heroToSelect);
-
-  // Wait for stability after the action that triggers navigation
-  await harness.fixture.whenStable();
-
-  // 2. Assert on the URL
-  expect(harness.router.url).toEqual('/heroes/42');
-
-  // 3. Get the activated component after navigation
-  const heroDetail = await harness.getHarness(HeroDetail);
-
-  // 4. Assert on the state of the new component
-  expect(await heroDetail.componentInstance.hero.name).toBe('Test Hero');
-});
-
-it('should get the activated component directly', async () => {
-  // Navigate and get the component instance in one step
-  const dashboardInstance = await harness.navigateByUrl('/', Dashboard);
-
-  expect(dashboardInstance).toBeInstanceOf(Dashboard);
-});
-```
-
-### Best Practices
-
-- **Navigate with the Harness:** Always use `harness.navigateByUrl()` to simulate navigation. This method returns a promise that resolves with the instance of the activated component.
-- **Access the Router State:** Use `harness.router` to access the live router instance and assert on its state (e.g., `harness.router.url`).
-- **Get Activated Components:** Use `harness.getHarness(ComponentType)` to get an instance of a component harness for the currently activated routed component, or `harness.routeDebugElement` to get the `DebugElement`.
-- **Wait for Stability:** After performing an action that causes navigation, always `await harness.fixture.whenStable()` to ensure the routing is complete before making assertions.
+# Testing with the RouterTestingHarness
+
+When testing components that involve routing, it is crucial **not to mock the Router or related services**. Instead, use the `RouterTestingHarness`, which provides a robust and reliable way to test routing logic in an environment that closely mirrors a real application.
+
+Using the harness ensures you are testing the actual router configuration, guards, and resolvers, leading to more meaningful tests.
+
+## Setting Up for Router Testing
+
+The `RouterTestingHarness` is the primary tool for testing routing scenarios. You also need to provide your test routes using the `provideRouter` function in your `TestBed` configuration.
+
+### Example Setup
+
+```ts
+import {TestBed} from '@angular/core/testing';
+import {provideRouter} from '@angular/router';
+import {RouterTestingHarness} from '@angular/router/testing';
+import {Dashboard} from './dashboard.component';
+import {HeroDetail} from './hero-detail.component';
+
+describe('Dashboard Component Routing', () => {
+  let harness: RouterTestingHarness;
+
+  beforeEach(async () => {
+    // 1. Configure TestBed with test routes
+    await TestBed.configureTestingModule({
+      providers: [
+        // Use provideRouter with your test-specific routes
+        provideRouter([
+          {path: '', component: Dashboard},
+          {path: 'heroes/:id', component: HeroDetail},
+        ]),
+      ],
+    }).compileComponents();
+
+    // 2. Create the RouterTestingHarness
+    harness = await RouterTestingHarness.create();
+  });
+});
+```
+
+### Key Concepts
+
+1. **`provideRouter([...])`**: Provide a test-specific routing configuration. This should include the routes necessary for the component-under-test to function correctly.
+2. **`RouterTestingHarness.create()`**: Asynchronously creates and initializes the harness and performs an initial navigation to the root URL (`/`).
+
+## Writing Router Tests
+
+Once the harness is created, you can use it to drive navigation and make assertions on the state of the router and the activated components.
+
+### Example: Testing Navigation
+
+```ts
+it('should navigate to a hero detail when a hero is selected', async () => {
+  // 1. Navigate to the initial component and get its instance
+  const dashboard = await harness.navigateByUrl('/', Dashboard);
+
+  // Suppose the dashboard has a method to select a hero
+  const heroToSelect = {id: 42, name: 'Test Hero'};
+  dashboard.selectHero(heroToSelect);
+
+  // Wait for stability after the action that triggers navigation
+  await harness.fixture.whenStable();
+
+  // 2. Assert on the URL
+  expect(harness.router.url).toEqual('/heroes/42');
+
+  // 3. Get the activated component after navigation
+  const heroDetail = await harness.getHarness(HeroDetail);
+
+  // 4. Assert on the state of the new component
+  expect(await heroDetail.componentInstance.hero.name).toBe('Test Hero');
+});
+
+it('should get the activated component directly', async () => {
+  // Navigate and get the component instance in one step
+  const dashboardInstance = await harness.navigateByUrl('/', Dashboard);
+
+  expect(dashboardInstance).toBeInstanceOf(Dashboard);
+});
+```
+
+### Best Practices
+
+- **Navigate with the Harness:** Always use `harness.navigateByUrl()` to simulate navigation. This method returns a promise that resolves with the instance of the activated component.
+- **Access the Router State:** Use `harness.router` to access the live router instance and assert on its state (e.g., `harness.router.url`).
+- **Get Activated Components:** Use `harness.getHarness(ComponentType)` to get an instance of a component harness for the currently activated routed component, or `harness.routeDebugElement` to get the `DebugElement`.
+- **Wait for Stability:** After performing an action that causes navigation, always `await harness.fixture.whenStable()` to ensure the routing is complete before making assertions.