codeply-cli 0.3.1 → 0.4.0

package/skills/angular-developer/references/navigate-to-routes.md

@@ -1,69 +1,69 @@
-# Navigate to Routes
-
-Angular provides both declarative and programmatic ways to navigate between routes.
-
-## Declarative Navigation (`RouterLink`)
-
-Use the `RouterLink` directive on anchor elements.
-
-```ts
-import {RouterLink, RouterLinkActive} from '@angular/router';
-
-@Component({
-  imports: [RouterLink, RouterLinkActive],
-  template: `
-    <nav>
-      <a routerLink="/dashboard" routerLinkActive="active-link">Dashboard</a>
-      <a [routerLink]="['/user', userId]">Profile</a>
-    </nav>
-  `,
-})
-export class Nav {
-  userId = '123';
-}
-```
-
-- **Absolute Paths**: Start with `/` (e.g., `/settings`).
-- **Relative Paths**: No leading `/`. Use `../` to go up a level.
-
-## Programmatic Navigation (`Router`)
-
-Inject the `Router` service to navigate via TypeScript code.
-
-### `router.navigate()`
-
-Uses an array of commands.
-
-```ts
-private router = inject(Router);
-private route = inject(ActivatedRoute);
-
-// Standard navigation
-this.router.navigate(['/profile']);
-
-// With parameters
-this.router.navigate(['/search'], {
-  queryParams: { q: 'angular' },
-  fragment: 'results'
-});
-
-// Relative navigation
-this.router.navigate(['edit'], { relativeTo: this.route });
-```
-
-### `router.navigateByUrl()`
-
-Uses a string path. Ideal for absolute navigation or full URLs.
-
-```ts
-this.router.navigateByUrl('/products/123?view=details');
-
-// Replace current entry in history
-this.router.navigateByUrl('/login', {replaceUrl: true});
-```
-
-## URL Parameters
-
-- **Route Params**: Part of the path (e.g., `/user/123`).
-- **Query Params**: After the `?` (e.g., `/search?q=query`).
-- **Matrix Params**: Scoped to a segment (e.g., `/products;category=books`).
+# Navigate to Routes
+
+Angular provides both declarative and programmatic ways to navigate between routes.
+
+## Declarative Navigation (`RouterLink`)
+
+Use the `RouterLink` directive on anchor elements.
+
+```ts
+import {RouterLink, RouterLinkActive} from '@angular/router';
+
+@Component({
+  imports: [RouterLink, RouterLinkActive],
+  template: `
+    <nav>
+      <a routerLink="/dashboard" routerLinkActive="active-link">Dashboard</a>
+      <a [routerLink]="['/user', userId]">Profile</a>
+    </nav>
+  `,
+})
+export class Nav {
+  userId = '123';
+}
+```
+
+- **Absolute Paths**: Start with `/` (e.g., `/settings`).
+- **Relative Paths**: No leading `/`. Use `../` to go up a level.
+
+## Programmatic Navigation (`Router`)
+
+Inject the `Router` service to navigate via TypeScript code.
+
+### `router.navigate()`
+
+Uses an array of commands.
+
+```ts
+private router = inject(Router);
+private route = inject(ActivatedRoute);
+
+// Standard navigation
+this.router.navigate(['/profile']);
+
+// With parameters
+this.router.navigate(['/search'], {
+  queryParams: { q: 'angular' },
+  fragment: 'results'
+});
+
+// Relative navigation
+this.router.navigate(['edit'], { relativeTo: this.route });
+```
+
+### `router.navigateByUrl()`
+
+Uses a string path. Ideal for absolute navigation or full URLs.
+
+```ts
+this.router.navigateByUrl('/products/123?view=details');
+
+// Replace current entry in history
+this.router.navigateByUrl('/login', {replaceUrl: true});
+```
+
+## URL Parameters
+
+- **Route Params**: Part of the path (e.g., `/user/123`).
+- **Query Params**: After the `?` (e.g., `/search?q=query`).
+- **Matrix Params**: Scoped to a segment (e.g., `/products;category=books`).

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

@@ -1,86 +1,86 @@
-# Outputs (Custom Events)
-
-Outputs allow a child component to emit custom events that a parent component can listen to. Angular recommends using the new `output()` function for modern applications.
-
-## Function-based outputs
-
-Declare outputs using the `output()` function. This returns an `OutputEmitterRef`.
-
-```ts
-import {Component, output} from '@angular/core';
-
-@Component({
-  selector: 'custom-slider',
-  template: `<button (click)="changeValue(50)">Set to 50</button>`,
-})
-export class CustomSlider {
-  // Output without event data
-  panelClosed = output<void>();
-
-  // Output with event data (number)
-  valueChanged = output<number>();
-
-  changeValue(newValue: number) {
-    this.valueChanged.emit(newValue);
-  }
-}
-```
-
-### Usage in Template
-
-Bind to the output event using parentheses `()`. If the event emits data, access it using the special `$event` variable.
-
-```html
-<custom-slider (panelClosed)="savePanelState()" (valueChanged)="logValue($event)" />
-```
-
-## Configuration Options
-
-The `output` function accepts a config object to specify an alias.
-
-```ts
-@Component({...})
-export class CustomSlider {
-  // The event is named 'valueChanged' in the template,
-  // but accessed as 'changed' in the component class.
-  changed = output<number>({ alias: 'valueChanged' });
-}
-```
-
-## Programmatic Subscription
-
-When creating components dynamically, you can subscribe to outputs programmatically:
-
-```ts
-const componentRef = viewContainerRef.createComponent(CustomSlider);
-
-const subscription = componentRef.instance.valueChanged.subscribe((val) => {
-  console.log('Value changed:', val);
-});
-
-// Clean up manually if needed (Angular cleans up destroyed components automatically)
-subscription.unsubscribe();
-```
-
-## Decorator-based Outputs (@Output)
-
-The legacy API uses the `@Output()` decorator with an `EventEmitter`. It remains supported but is not recommended for new code.
-
-```ts
-import { Component, Output, EventEmitter } from '@angular/core';
-
-@Component({...})
-export class LegacyExample {
-  @Output() valueChanged = new EventEmitter<number>();
-
-  // With alias
-  @Output('customEventName') changed = new EventEmitter<void>();
-}
-```
-
-## Best Practices
-
-- **Prefer `output()`**: Use the function-based `output()` instead of `@Output()` and `EventEmitter`.
-- **Naming**: Use `camelCase` for output names. Avoid prefixing with `on` (e.g., use `valueChanged` instead of `onValueChanged`).
-- **No DOM Bubbling**: Angular custom events do not bubble up the DOM tree like native events.
-- **Avoid Collisions**: Do not choose names that collide with native DOM events (like `click` or `submit`).
+# Outputs (Custom Events)
+
+Outputs allow a child component to emit custom events that a parent component can listen to. Angular recommends using the new `output()` function for modern applications.
+
+## Function-based outputs
+
+Declare outputs using the `output()` function. This returns an `OutputEmitterRef`.
+
+```ts
+import {Component, output} from '@angular/core';
+
+@Component({
+  selector: 'custom-slider',
+  template: `<button (click)="changeValue(50)">Set to 50</button>`,
+})
+export class CustomSlider {
+  // Output without event data
+  panelClosed = output<void>();
+
+  // Output with event data (number)
+  valueChanged = output<number>();
+
+  changeValue(newValue: number) {
+    this.valueChanged.emit(newValue);
+  }
+}
+```
+
+### Usage in Template
+
+Bind to the output event using parentheses `()`. If the event emits data, access it using the special `$event` variable.
+
+```html
+<custom-slider (panelClosed)="savePanelState()" (valueChanged)="logValue($event)" />
+```
+
+## Configuration Options
+
+The `output` function accepts a config object to specify an alias.
+
+```ts
+@Component({...})
+export class CustomSlider {
+  // The event is named 'valueChanged' in the template,
+  // but accessed as 'changed' in the component class.
+  changed = output<number>({ alias: 'valueChanged' });
+}
+```
+
+## Programmatic Subscription
+
+When creating components dynamically, you can subscribe to outputs programmatically:
+
+```ts
+const componentRef = viewContainerRef.createComponent(CustomSlider);
+
+const subscription = componentRef.instance.valueChanged.subscribe((val) => {
+  console.log('Value changed:', val);
+});
+
+// Clean up manually if needed (Angular cleans up destroyed components automatically)
+subscription.unsubscribe();
+```
+
+## Decorator-based Outputs (@Output)
+
+The legacy API uses the `@Output()` decorator with an `EventEmitter`. It remains supported but is not recommended for new code.
+
+```ts
+import { Component, Output, EventEmitter } from '@angular/core';
+
+@Component({...})
+export class LegacyExample {
+  @Output() valueChanged = new EventEmitter<number>();
+
+  // With alias
+  @Output('customEventName') changed = new EventEmitter<void>();
+}
+```
+
+## Best Practices
+
+- **Prefer `output()`**: Use the function-based `output()` instead of `@Output()` and `EventEmitter`.
+- **Naming**: Use `camelCase` for output names. Avoid prefixing with `on` (e.g., use `valueChanged` instead of `onValueChanged`).
+- **No DOM Bubbling**: Angular custom events do not bubble up the DOM tree like native events.
+- **Avoid Collisions**: Do not choose names that collide with native DOM events (like `click` or `submit`).

package/skills/angular-developer/references/reactive-forms.md

@@ -1,122 +1,122 @@
-# Reactive Forms
-
-Reactive forms provide a model-driven approach to handling form inputs. They are built around observable streams and provide synchronous access to the data model, making them more scalable and testable than template-driven forms.
-
-## Core Classes
-
-Reactive forms are built using these fundamental classes from `@angular/forms`:
-
-- `FormControl`: Manages the value and validity of an individual input.
-- `FormGroup`: Manages a group of controls (an object-like structure).
-- `FormArray`: Manages a numerically indexed array of controls.
-- `FormBuilder`: A service that provides factory methods for creating control instances.
-
-## Setup
-
-Import `ReactiveFormsModule` into your component.
-
-```ts
-import {Component, inject} from '@angular/core';
-import {ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder} from '@angular/forms';
-
-@Component({
-  selector: 'app-profile-editor',
-  imports: [ReactiveFormsModule],
-  templateUrl: './profile-editor.component.html',
-})
-export class ProfileEditor {
-  private fb = inject(FormBuilder);
-
-  // Using FormBuilder for concise definition
-  profileForm = this.fb.group({
-    firstName: ['', Validators.required],
-    lastName: [''],
-    address: this.fb.group({
-      street: [''],
-      city: [''],
-    }),
-    aliases: this.fb.array([this.fb.control('')]),
-  });
-
-  onSubmit() {
-    console.warn(this.profileForm.value);
-  }
-}
-```
-
-## Template Binding
-
-Use directives to bind the model to the view:
-
-- `[formGroup]`: Binds a `FormGroup` to a `<form>` or `<div>`.
-- `formControlName`: Binds a named control within a group to an input.
-- `formGroupName`: Binds a nested `FormGroup`.
-- `formArrayName`: Binds a nested `FormArray`.
-- `[formControl]`: Binds a standalone `FormControl`.
-
-```html
-<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
-  <input type="text" formControlName="firstName" />
-
-  <div formGroupName="address">
-    <input type="text" formControlName="street" />
-  </div>
-
-  <div formArrayName="aliases">
-    @for (alias of aliases.controls; track $index) {
-    <input type="text" [formControlName]="$index" />
-    }
-  </div>
-
-  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
-</form>
-```
-
-## Accessing Controls
-
-Use getters for easy access to controls, especially for `FormArray`.
-
-```ts
-get aliases() {
-  return this.profileForm.get('aliases') as FormArray;
-}
-
-addAlias() {
-  this.aliases.push(this.fb.control(''));
-}
-```
-
-## Updating Values
-
-- `patchValue()`: Updates only the specified properties. Fails silently on structural mismatches.
-- `setValue()`: Replaces the entire model. Strictly enforces the form structure.
-
-```ts
-updateProfile() {
-  this.profileForm.patchValue({
-    firstName: 'Nancy',
-    address: { street: '123 Drew Street' }
-  });
-}
-```
-
-## Unified Change Events
-
-Modern Angular (v18+) provides a single `events` observable on all controls to track value, status, pristine, touched, reset, and submit events.
-
-```ts
-import {ValueChangeEvent, StatusChangeEvent} from '@angular/forms';
-
-this.profileForm.events.subscribe((event) => {
-  if (event instanceof ValueChangeEvent) {
-    console.log('New value:', event.value);
-  }
-});
-```
-
-## Manual State Management
-
-- `markAsTouched()` / `markAllAsTouched()`: Useful for showing validation errors on submit.
-- `markAsDirty()` / `markAsPristine()`: Tracks if the value has been modified.
-- `updateValueAndValidity()`: Manually triggers recalculation of value and status.
-- Options `{ emitEvent: false }` or `{ onlySelf: true }` can be passed to most methods to control propagation.
+# Reactive Forms
+
+Reactive forms provide a model-driven approach to handling form inputs. They are built around observable streams and provide synchronous access to the data model, making them more scalable and testable than template-driven forms.
+
+## Core Classes
+
+Reactive forms are built using these fundamental classes from `@angular/forms`:
+
+- `FormControl`: Manages the value and validity of an individual input.
+- `FormGroup`: Manages a group of controls (an object-like structure).
+- `FormArray`: Manages a numerically indexed array of controls.
+- `FormBuilder`: A service that provides factory methods for creating control instances.
+
+## Setup
+
+Import `ReactiveFormsModule` into your component.
+
+```ts
+import {Component, inject} from '@angular/core';
+import {ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder} from '@angular/forms';
+
+@Component({
+  selector: 'app-profile-editor',
+  imports: [ReactiveFormsModule],
+  templateUrl: './profile-editor.component.html',
+})
+export class ProfileEditor {
+  private fb = inject(FormBuilder);
+
+  // Using FormBuilder for concise definition
+  profileForm = this.fb.group({
+    firstName: ['', Validators.required],
+    lastName: [''],
+    address: this.fb.group({
+      street: [''],
+      city: [''],
+    }),
+    aliases: this.fb.array([this.fb.control('')]),
+  });
+
+  onSubmit() {
+    console.warn(this.profileForm.value);
+  }
+}
+```
+
+## Template Binding
+
+Use directives to bind the model to the view:
+
+- `[formGroup]`: Binds a `FormGroup` to a `<form>` or `<div>`.
+- `formControlName`: Binds a named control within a group to an input.
+- `formGroupName`: Binds a nested `FormGroup`.
+- `formArrayName`: Binds a nested `FormArray`.
+- `[formControl]`: Binds a standalone `FormControl`.
+
+```html
+<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
+  <input type="text" formControlName="firstName" />
+
+  <div formGroupName="address">
+    <input type="text" formControlName="street" />
+  </div>
+
+  <div formArrayName="aliases">
+    @for (alias of aliases.controls; track $index) {
+    <input type="text" [formControlName]="$index" />
+    }
+  </div>
+
+  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
+</form>
+```
+
+## Accessing Controls
+
+Use getters for easy access to controls, especially for `FormArray`.
+
+```ts
+get aliases() {
+  return this.profileForm.get('aliases') as FormArray;
+}
+
+addAlias() {
+  this.aliases.push(this.fb.control(''));
+}
+```
+
+## Updating Values
+
+- `patchValue()`: Updates only the specified properties. Fails silently on structural mismatches.
+- `setValue()`: Replaces the entire model. Strictly enforces the form structure.
+
+```ts
+updateProfile() {
+  this.profileForm.patchValue({
+    firstName: 'Nancy',
+    address: { street: '123 Drew Street' }
+  });
+}
+```
+
+## Unified Change Events
+
+Modern Angular (v18+) provides a single `events` observable on all controls to track value, status, pristine, touched, reset, and submit events.
+
+```ts
+import {ValueChangeEvent, StatusChangeEvent} from '@angular/forms';
+
+this.profileForm.events.subscribe((event) => {
+  if (event instanceof ValueChangeEvent) {
+    console.log('New value:', event.value);
+  }
+});
+```
+
+## Manual State Management
+
+- `markAsTouched()` / `markAllAsTouched()`: Useful for showing validation errors on submit.
+- `markAsDirty()` / `markAsPristine()`: Tracks if the value has been modified.
+- `updateValueAndValidity()`: Manually triggers recalculation of value and status.
+- Options `{ emitEvent: false }` or `{ onlySelf: true }` can be passed to most methods to control propagation.

package/skills/angular-developer/references/rendering-strategies.md

@@ -1,44 +1,44 @@
-# Rendering Strategies
-
-Angular supports multiple rendering strategies to optimize for SEO, performance, and interactivity.
-
-## 1. Client-Side Rendering (CSR)
-
-**Default Strategy.** Content is rendered entirely in the browser.
-
-- **Use case**: Interactive dashboards, internal tools.
-- **Pros**: Simplest to configure, low server cost.
-- **Cons**: Poor SEO, slower initial content visibility (must wait for JS).
-
-## 2. Static Site Generation (SSG / Prerendering)
-
-Content is pre-rendered into static HTML files at **build time**.
-
-- **Use case**: Marketing pages, blogs, documentation.
-- **Pros**: Fastest initial load, excellent SEO, CDN-friendly.
-- **Cons**: Requires rebuild for content updates, not for user-specific data.
-
-## 3. Server-Side Rendering (SSR)
-
-Content is rendered on the server for the **initial request**. Subsequent navigations happen client-side (SPA style).
-
-- **Use case**: E-commerce product pages, news sites, personalized dynamic content.
-- **Pros**: Excellent SEO, fast initial content visibility.
-- **Cons**: Requires a server (Node.js), higher server cost/latency.
-
-## Hydration
-
-Hydration is the process of making server-rendered HTML interactive in the browser.
-
-- **Full Hydration**: The entire app becomes interactive at once.
-- **Incremental Hydration**: (Advanced) Parts become interactive as needed using `@defer` blocks.
-- **Event Replay**: Captures and replays user events that happened before hydration finished.
-
-## Decision Matrix
-
-| Requirement                     | Strategy             |
-| :------------------------------ | :------------------- |
-| **SEO + Static Content**        | SSG                  |
-| **SEO + Dynamic Content**       | SSR                  |
-| **No SEO + High Interactivity** | CSR                  |
-| **Mixed**                       | Hybrid (Route-based) |
+# Rendering Strategies
+
+Angular supports multiple rendering strategies to optimize for SEO, performance, and interactivity.
+
+## 1. Client-Side Rendering (CSR)
+
+**Default Strategy.** Content is rendered entirely in the browser.
+
+- **Use case**: Interactive dashboards, internal tools.
+- **Pros**: Simplest to configure, low server cost.
+- **Cons**: Poor SEO, slower initial content visibility (must wait for JS).
+
+## 2. Static Site Generation (SSG / Prerendering)
+
+Content is pre-rendered into static HTML files at **build time**.
+
+- **Use case**: Marketing pages, blogs, documentation.
+- **Pros**: Fastest initial load, excellent SEO, CDN-friendly.
+- **Cons**: Requires rebuild for content updates, not for user-specific data.
+
+## 3. Server-Side Rendering (SSR)
+
+Content is rendered on the server for the **initial request**. Subsequent navigations happen client-side (SPA style).
+
+- **Use case**: E-commerce product pages, news sites, personalized dynamic content.
+- **Pros**: Excellent SEO, fast initial content visibility.
+- **Cons**: Requires a server (Node.js), higher server cost/latency.
+
+## Hydration
+
+Hydration is the process of making server-rendered HTML interactive in the browser.
+
+- **Full Hydration**: The entire app becomes interactive at once.
+- **Incremental Hydration**: (Advanced) Parts become interactive as needed using `@defer` blocks.
+- **Event Replay**: Captures and replays user events that happened before hydration finished.
+
+## Decision Matrix
+
+| Requirement                     | Strategy             |
+| :------------------------------ | :------------------- |
+| **SEO + Static Content**        | SSG                  |
+| **SEO + Dynamic Content**       | SSR                  |
+| **No SEO + High Interactivity** | CSR                  |
+| **Mixed**                       | Hybrid (Route-based) |