feat: Implement tasks feature using NGRX signals and remove the old counter store, alongside general project configuration and skill documentation updates.
continuous-integration/drone/pr Build is passing
continuous-integration/drone/pr Build is passing
This commit is contained in:
Dennis Hundertmark
@@ -12,7 +12,7 @@ Signals are Angular's reactive primitive for state management. They provide sync
|
||||
### signal() - Writable State
|
||||
|
||||
```typescript
|
||||
import { signal } from "@angular/core";
|
||||
import { signal } from '@angular/core';
|
||||
|
||||
// Create writable signal
|
||||
const count = signal(0);
|
||||
@@ -28,67 +28,65 @@ count.update((c) => c + 1);
|
||||
|
||||
// With explicit type
|
||||
const user = signal<User | null>(null);
|
||||
user.set({ id: 1, name: "Alice" });
|
||||
user.set({ id: 1, name: 'Alice' });
|
||||
```
|
||||
|
||||
### computed() - Derived State
|
||||
|
||||
```typescript
|
||||
import { signal, computed } from "@angular/core";
|
||||
import { signal, computed } from '@angular/core';
|
||||
|
||||
const firstName = signal("John");
|
||||
const lastName = signal("Doe");
|
||||
const firstName = signal('John');
|
||||
const lastName = signal('Doe');
|
||||
|
||||
// Derived signal - automatically updates when dependencies change
|
||||
const fullName = computed(() => `${firstName()} ${lastName()}`);
|
||||
|
||||
console.log(fullName()); // "John Doe"
|
||||
firstName.set("Jane");
|
||||
firstName.set('Jane');
|
||||
console.log(fullName()); // "Jane Doe"
|
||||
|
||||
// Computed with complex logic
|
||||
const items = signal<Item[]>([]);
|
||||
const filter = signal("");
|
||||
const filter = signal('');
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
const query = filter().toLowerCase();
|
||||
return items().filter((item) => item.name.toLowerCase().includes(query));
|
||||
const query = filter().toLowerCase();
|
||||
return items().filter((item) => item.name.toLowerCase().includes(query));
|
||||
});
|
||||
|
||||
const totalPrice = computed(() =>
|
||||
filteredItems().reduce((sum, item) => sum + item.price, 0),
|
||||
);
|
||||
const totalPrice = computed(() => filteredItems().reduce((sum, item) => sum + item.price, 0));
|
||||
```
|
||||
|
||||
### linkedSignal() - Dependent State with Reset
|
||||
|
||||
```typescript
|
||||
import { signal, linkedSignal } from "@angular/core";
|
||||
import { signal, linkedSignal } from '@angular/core';
|
||||
|
||||
const options = signal(["A", "B", "C"]);
|
||||
const options = signal(['A', 'B', 'C']);
|
||||
|
||||
// Resets to first option when options change
|
||||
const selected = linkedSignal(() => options()[0]);
|
||||
|
||||
console.log(selected()); // "A"
|
||||
selected.set("B"); // User selects B
|
||||
selected.set('B'); // User selects B
|
||||
console.log(selected()); // "B"
|
||||
options.set(["X", "Y"]); // Options change
|
||||
options.set(['X', 'Y']); // Options change
|
||||
console.log(selected()); // "X" - auto-reset to first
|
||||
|
||||
// With previous value access
|
||||
const items = signal<Item[]>([]);
|
||||
|
||||
const selectedItem = linkedSignal<Item[], Item | null>({
|
||||
source: () => items(),
|
||||
computation: (newItems, previous) => {
|
||||
// Try to preserve selection if item still exists
|
||||
const prevItem = previous?.value;
|
||||
if (prevItem && newItems.some((i) => i.id === prevItem.id)) {
|
||||
return prevItem;
|
||||
}
|
||||
return newItems[0] ?? null;
|
||||
},
|
||||
source: () => items(),
|
||||
computation: (newItems, previous) => {
|
||||
// Try to preserve selection if item still exists
|
||||
const prevItem = previous?.value;
|
||||
if (prevItem && newItems.some((i) => i.id === prevItem.id)) {
|
||||
return prevItem;
|
||||
}
|
||||
return newItems[0] ?? null;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -128,66 +126,64 @@ export class Search {
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
selector: "app-todo-list",
|
||||
template: `
|
||||
<input
|
||||
[value]="newTodo()"
|
||||
(input)="newTodo.set($any($event.target).value)"
|
||||
/>
|
||||
<button (click)="addTodo()" [disabled]="!canAdd()">Add</button>
|
||||
selector: 'app-todo-list',
|
||||
template: `
|
||||
<input
|
||||
[value]="newTodo()"
|
||||
(input)="newTodo.set($any($event.target).value)" />
|
||||
<button
|
||||
[disabled]="!canAdd()"
|
||||
(click)="addTodo()">
|
||||
Add
|
||||
</button>
|
||||
|
||||
<ul>
|
||||
@for (todo of filteredTodos(); track todo.id) {
|
||||
<li [class.done]="todo.done">
|
||||
{{ todo.text }}
|
||||
<button (click)="toggleTodo(todo.id)">Toggle</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
<ul>
|
||||
@for (todo of filteredTodos(); track todo.id) {
|
||||
<li [class.done]="todo.done">
|
||||
{{ todo.text }}
|
||||
<button (click)="toggleTodo(todo.id)">Toggle</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<p>{{ remaining() }} remaining</p>
|
||||
`,
|
||||
<p>{{ remaining() }} remaining</p>
|
||||
`,
|
||||
})
|
||||
export class TodoList {
|
||||
// State
|
||||
todos = signal<Todo[]>([]);
|
||||
newTodo = signal("");
|
||||
filter = signal<"all" | "active" | "done">("all");
|
||||
// State
|
||||
todos = signal<Todo[]>([]);
|
||||
newTodo = signal('');
|
||||
filter = signal<'all' | 'active' | 'done'>('all');
|
||||
|
||||
// Derived state
|
||||
canAdd = computed(() => this.newTodo().trim().length > 0);
|
||||
// Derived state
|
||||
canAdd = computed(() => this.newTodo().trim().length > 0);
|
||||
|
||||
filteredTodos = computed(() => {
|
||||
const todos = this.todos();
|
||||
switch (this.filter()) {
|
||||
case "active":
|
||||
return todos.filter((t) => !t.done);
|
||||
case "done":
|
||||
return todos.filter((t) => t.done);
|
||||
default:
|
||||
return todos;
|
||||
filteredTodos = computed(() => {
|
||||
const todos = this.todos();
|
||||
switch (this.filter()) {
|
||||
case 'active':
|
||||
return todos.filter((t) => !t.done);
|
||||
case 'done':
|
||||
return todos.filter((t) => t.done);
|
||||
default:
|
||||
return todos;
|
||||
}
|
||||
});
|
||||
|
||||
remaining = computed(() => this.todos().filter((t) => !t.done).length);
|
||||
|
||||
// Actions
|
||||
addTodo() {
|
||||
const text = this.newTodo().trim();
|
||||
if (text) {
|
||||
this.todos.update((todos) => [...todos, { id: crypto.randomUUID(), text, done: false }]);
|
||||
this.newTodo.set('');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
remaining = computed(() => this.todos().filter((t) => !t.done).length);
|
||||
|
||||
// Actions
|
||||
addTodo() {
|
||||
const text = this.newTodo().trim();
|
||||
if (text) {
|
||||
this.todos.update((todos) => [
|
||||
...todos,
|
||||
{ id: crypto.randomUUID(), text, done: false },
|
||||
]);
|
||||
this.newTodo.set("");
|
||||
toggleTodo(id: string) {
|
||||
this.todos.update((todos) => todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
|
||||
}
|
||||
}
|
||||
|
||||
toggleTodo(id: string) {
|
||||
this.todos.update((todos) =>
|
||||
todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -242,63 +238,58 @@ export class Search {
|
||||
|
||||
```typescript
|
||||
// Custom equality function
|
||||
const user = signal<User>(
|
||||
{ id: 1, name: "Alice" },
|
||||
{ equal: (a, b) => a.id === b.id },
|
||||
);
|
||||
const user = signal<User>({ id: 1, name: 'Alice' }, { equal: (a, b) => a.id === b.id });
|
||||
|
||||
// Only triggers updates when ID changes
|
||||
user.set({ id: 1, name: "Alice Updated" }); // No update
|
||||
user.set({ id: 2, name: "Bob" }); // Triggers update
|
||||
user.set({ id: 1, name: 'Alice Updated' }); // No update
|
||||
user.set({ id: 2, name: 'Bob' }); // Triggers update
|
||||
```
|
||||
|
||||
## Untracked Reads
|
||||
|
||||
```typescript
|
||||
import { untracked } from "@angular/core";
|
||||
import { untracked } from '@angular/core';
|
||||
|
||||
const a = signal(1);
|
||||
const b = signal(2);
|
||||
|
||||
// Only depends on 'a', not 'b'
|
||||
const result = computed(() => {
|
||||
const aVal = a();
|
||||
const bVal = untracked(() => b());
|
||||
return aVal + bVal;
|
||||
const aVal = a();
|
||||
const bVal = untracked(() => b());
|
||||
return aVal + bVal;
|
||||
});
|
||||
```
|
||||
|
||||
## Service State Pattern
|
||||
|
||||
```typescript
|
||||
@Injectable({ providedIn: "root" })
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class Auth {
|
||||
// Private writable state
|
||||
private _user = signal<User | null>(null);
|
||||
private _loading = signal(false);
|
||||
// Private writable state
|
||||
private _user = signal<User | null>(null);
|
||||
private _loading = signal(false);
|
||||
|
||||
// Public read-only signals
|
||||
readonly user = this._user.asReadonly();
|
||||
readonly loading = this._loading.asReadonly();
|
||||
readonly isAuthenticated = computed(() => this._user() !== null);
|
||||
// Public read-only signals
|
||||
readonly user = this._user.asReadonly();
|
||||
readonly loading = this._loading.asReadonly();
|
||||
readonly isAuthenticated = computed(() => this._user() !== null);
|
||||
|
||||
private http = inject(HttpClient);
|
||||
private http = inject(HttpClient);
|
||||
|
||||
async login(credentials: Credentials): Promise<void> {
|
||||
this._loading.set(true);
|
||||
try {
|
||||
const user = await firstValueFrom(
|
||||
this.http.post<User>("/api/login", credentials),
|
||||
);
|
||||
this._user.set(user);
|
||||
} finally {
|
||||
this._loading.set(false);
|
||||
async login(credentials: Credentials): Promise<void> {
|
||||
this._loading.set(true);
|
||||
try {
|
||||
const user = await firstValueFrom(this.http.post<User>('/api/login', credentials));
|
||||
this._user.set(user);
|
||||
} finally {
|
||||
this._loading.set(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
logout(): void {
|
||||
this._user.set(null);
|
||||
}
|
||||
logout(): void {
|
||||
this._user.set(null);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -61,12 +61,12 @@ userResource.update(current => ({ ...current, name: 'Updated' }));
|
||||
|
||||
```typescript
|
||||
const todosResource = resource({
|
||||
defaultValue: [] as Todo[],
|
||||
params: () => ({ filter: this.filter() }),
|
||||
loader: async ({ params }) => {
|
||||
const response = await fetch(`/api/todos?filter=${params.filter}`);
|
||||
return response.json();
|
||||
},
|
||||
defaultValue: [] as Todo[],
|
||||
params: () => ({ filter: this.filter() }),
|
||||
loader: async ({ params }) => {
|
||||
const response = await fetch(`/api/todos?filter=${params.filter}`);
|
||||
return response.json();
|
||||
},
|
||||
});
|
||||
|
||||
// value() returns Todo[] (never undefined due to defaultValue)
|
||||
@@ -78,14 +78,14 @@ const todosResource = resource({
|
||||
const userId = signal<string | null>(null);
|
||||
|
||||
const userResource = resource({
|
||||
params: () => {
|
||||
const id = userId();
|
||||
// Return undefined to skip loading
|
||||
return id ? { id } : undefined;
|
||||
},
|
||||
loader: async ({ params }) => {
|
||||
return fetch(`/api/users/${params.id}`).then((r) => r.json());
|
||||
},
|
||||
params: () => {
|
||||
const id = userId();
|
||||
// Return undefined to skip loading
|
||||
return id ? { id } : undefined;
|
||||
},
|
||||
loader: async ({ params }) => {
|
||||
return fetch(`/api/users/${params.id}`).then((r) => r.json());
|
||||
},
|
||||
});
|
||||
// Status is 'idle' when params returns undefined
|
||||
```
|
||||
@@ -96,81 +96,75 @@ For complex state, create a dedicated store:
|
||||
|
||||
```typescript
|
||||
interface ProductState {
|
||||
products: Product[];
|
||||
selectedId: string | null;
|
||||
filter: string;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
products: Product[];
|
||||
selectedId: string | null;
|
||||
filter: string;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: "root" })
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ProductSt {
|
||||
// Private state
|
||||
private state = signal<ProductState>({
|
||||
products: [],
|
||||
selectedId: null,
|
||||
filter: "",
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
// Selectors (computed signals)
|
||||
readonly products = computed(() => this.state().products);
|
||||
readonly selectedId = computed(() => this.state().selectedId);
|
||||
readonly filter = computed(() => this.state().filter);
|
||||
readonly loading = computed(() => this.state().loading);
|
||||
readonly error = computed(() => this.state().error);
|
||||
|
||||
readonly filteredProducts = computed(() => {
|
||||
const { products, filter } = this.state();
|
||||
if (!filter) return products;
|
||||
return products.filter((p) =>
|
||||
p.name.toLowerCase().includes(filter.toLowerCase()),
|
||||
);
|
||||
});
|
||||
|
||||
readonly selectedProduct = computed(() => {
|
||||
const { products, selectedId } = this.state();
|
||||
return products.find((p) => p.id === selectedId) ?? null;
|
||||
});
|
||||
|
||||
private http = inject(HttpClient);
|
||||
|
||||
// Actions
|
||||
setFilter(filter: string): void {
|
||||
this.state.update((s) => ({ ...s, filter }));
|
||||
}
|
||||
|
||||
selectProduct(id: string | null): void {
|
||||
this.state.update((s) => ({ ...s, selectedId: id }));
|
||||
}
|
||||
|
||||
async loadProducts(): Promise<void> {
|
||||
this.state.update((s) => ({ ...s, loading: true, error: null }));
|
||||
|
||||
try {
|
||||
const products = await firstValueFrom(
|
||||
this.http.get<Product[]>("/api/products"),
|
||||
);
|
||||
this.state.update((s) => ({ ...s, products, loading: false }));
|
||||
} catch (err) {
|
||||
this.state.update((s) => ({
|
||||
...s,
|
||||
// Private state
|
||||
private state = signal<ProductState>({
|
||||
products: [],
|
||||
selectedId: null,
|
||||
filter: '',
|
||||
loading: false,
|
||||
error: "Failed to load products",
|
||||
}));
|
||||
}
|
||||
}
|
||||
error: null,
|
||||
});
|
||||
|
||||
async addProduct(product: Omit<Product, "id">): Promise<void> {
|
||||
const newProduct = await firstValueFrom(
|
||||
this.http.post<Product>("/api/products", product),
|
||||
);
|
||||
this.state.update((s) => ({
|
||||
...s,
|
||||
products: [...s.products, newProduct],
|
||||
}));
|
||||
}
|
||||
// Selectors (computed signals)
|
||||
readonly products = computed(() => this.state().products);
|
||||
readonly selectedId = computed(() => this.state().selectedId);
|
||||
readonly filter = computed(() => this.state().filter);
|
||||
readonly loading = computed(() => this.state().loading);
|
||||
readonly error = computed(() => this.state().error);
|
||||
|
||||
readonly filteredProducts = computed(() => {
|
||||
const { products, filter } = this.state();
|
||||
if (!filter) return products;
|
||||
return products.filter((p) => p.name.toLowerCase().includes(filter.toLowerCase()));
|
||||
});
|
||||
|
||||
readonly selectedProduct = computed(() => {
|
||||
const { products, selectedId } = this.state();
|
||||
return products.find((p) => p.id === selectedId) ?? null;
|
||||
});
|
||||
|
||||
private http = inject(HttpClient);
|
||||
|
||||
// Actions
|
||||
setFilter(filter: string): void {
|
||||
this.state.update((s) => ({ ...s, filter }));
|
||||
}
|
||||
|
||||
selectProduct(id: string | null): void {
|
||||
this.state.update((s) => ({ ...s, selectedId: id }));
|
||||
}
|
||||
|
||||
async loadProducts(): Promise<void> {
|
||||
this.state.update((s) => ({ ...s, loading: true, error: null }));
|
||||
|
||||
try {
|
||||
const products = await firstValueFrom(this.http.get<Product[]>('/api/products'));
|
||||
this.state.update((s) => ({ ...s, products, loading: false }));
|
||||
} catch (err) {
|
||||
this.state.update((s) => ({
|
||||
...s,
|
||||
loading: false,
|
||||
error: 'Failed to load products',
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
async addProduct(product: Omit<Product, 'id'>): Promise<void> {
|
||||
const newProduct = await firstValueFrom(this.http.post<Product>('/api/products', product));
|
||||
this.state.update((s) => ({
|
||||
...s,
|
||||
products: [...s.products, newProduct],
|
||||
}));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -291,88 +285,86 @@ export class Search {
|
||||
### Optimistic Updates
|
||||
|
||||
```typescript
|
||||
@Injectable({ providedIn: "root" })
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class Todo {
|
||||
private todos = signal<Todo[]>([]);
|
||||
readonly items = this.todos.asReadonly();
|
||||
private todos = signal<Todo[]>([]);
|
||||
readonly items = this.todos.asReadonly();
|
||||
|
||||
private http = inject(HttpClient);
|
||||
private http = inject(HttpClient);
|
||||
|
||||
async toggleTodo(id: string): Promise<void> {
|
||||
// Optimistic update
|
||||
const previousTodos = this.todos();
|
||||
this.todos.update((todos) =>
|
||||
todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
|
||||
);
|
||||
async toggleTodo(id: string): Promise<void> {
|
||||
// Optimistic update
|
||||
const previousTodos = this.todos();
|
||||
this.todos.update((todos) => todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
|
||||
|
||||
try {
|
||||
await firstValueFrom(this.http.patch(`/api/todos/${id}/toggle`, {}));
|
||||
} catch {
|
||||
// Rollback on error
|
||||
this.todos.set(previousTodos);
|
||||
try {
|
||||
await firstValueFrom(this.http.patch(`/api/todos/${id}/toggle`, {}));
|
||||
} catch {
|
||||
// Rollback on error
|
||||
this.todos.set(previousTodos);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Testing Signals
|
||||
|
||||
```typescript
|
||||
describe("Counter", () => {
|
||||
it("should increment count", () => {
|
||||
const component = new Counter();
|
||||
describe('Counter', () => {
|
||||
it('should increment count', () => {
|
||||
const component = new Counter();
|
||||
|
||||
expect(component.count()).toBe(0);
|
||||
expect(component.count()).toBe(0);
|
||||
|
||||
component.increment();
|
||||
expect(component.count()).toBe(1);
|
||||
component.increment();
|
||||
expect(component.count()).toBe(1);
|
||||
|
||||
component.increment();
|
||||
expect(component.count()).toBe(2);
|
||||
});
|
||||
component.increment();
|
||||
expect(component.count()).toBe(2);
|
||||
});
|
||||
|
||||
it("should compute doubled value", () => {
|
||||
const component = new Counter();
|
||||
it('should compute doubled value', () => {
|
||||
const component = new Counter();
|
||||
|
||||
expect(component.doubled()).toBe(0);
|
||||
expect(component.doubled()).toBe(0);
|
||||
|
||||
component.count.set(5);
|
||||
expect(component.doubled()).toBe(10);
|
||||
});
|
||||
component.count.set(5);
|
||||
expect(component.doubled()).toBe(10);
|
||||
});
|
||||
});
|
||||
|
||||
describe("ProductSt", () => {
|
||||
let store: ProductSt;
|
||||
let httpMock: HttpTestingController;
|
||||
describe('ProductSt', () => {
|
||||
let store: ProductSt;
|
||||
let httpMock: HttpTestingController;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [ProductSt, provideHttpClient(), provideHttpClientTesting()],
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [ProductSt, provideHttpClient(), provideHttpClientTesting()],
|
||||
});
|
||||
|
||||
store = TestBed.inject(ProductSt);
|
||||
httpMock = TestBed.inject(HttpTestingController);
|
||||
});
|
||||
|
||||
store = TestBed.inject(ProductSt);
|
||||
httpMock = TestBed.inject(HttpTestingController);
|
||||
});
|
||||
it('should filter products', () => {
|
||||
// Set initial state
|
||||
store['state'].set({
|
||||
products: [
|
||||
{ id: '1', name: 'Apple' },
|
||||
{ id: '2', name: 'Banana' },
|
||||
],
|
||||
selectedId: null,
|
||||
filter: '',
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
it("should filter products", () => {
|
||||
// Set initial state
|
||||
store["state"].set({
|
||||
products: [
|
||||
{ id: "1", name: "Apple" },
|
||||
{ id: "2", name: "Banana" },
|
||||
],
|
||||
selectedId: null,
|
||||
filter: "",
|
||||
loading: false,
|
||||
error: null,
|
||||
expect(store.filteredProducts().length).toBe(2);
|
||||
|
||||
store.setFilter('app');
|
||||
expect(store.filteredProducts().length).toBe(1);
|
||||
expect(store.filteredProducts()[0].name).toBe('Apple');
|
||||
});
|
||||
|
||||
expect(store.filteredProducts().length).toBe(2);
|
||||
|
||||
store.setFilter("app");
|
||||
expect(store.filteredProducts().length).toBe(1);
|
||||
expect(store.filteredProducts()[0].name).toBe("Apple");
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
@@ -381,19 +373,19 @@ describe("ProductSt", () => {
|
||||
```typescript
|
||||
// Debug effect to log signal changes
|
||||
effect(() => {
|
||||
console.log("State changed:", {
|
||||
count: this.count(),
|
||||
items: this.items(),
|
||||
filter: this.filter(),
|
||||
});
|
||||
console.log('State changed:', {
|
||||
count: this.count(),
|
||||
items: this.items(),
|
||||
filter: this.filter(),
|
||||
});
|
||||
});
|
||||
|
||||
// Conditional debugging
|
||||
const DEBUG = signal(false);
|
||||
|
||||
effect(() => {
|
||||
if (untracked(() => DEBUG())) {
|
||||
console.log("Debug:", this.state());
|
||||
}
|
||||
if (untracked(() => DEBUG())) {
|
||||
console.log('Debug:', this.state());
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user