style: format whole project with prettier (#194)

Formats the whole project with prettier and integrate
a prettier check into CI

Author: GregOnNet

.github/workflows/build.yml

@@ -19,6 +19,7 @@ jobs:
           node-version: '18'
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
+      - run: pnpm run format:check
       - run: pnpm run lint:all
       - run: pnpm run test:all
       - run: pnpm run test:e2e

.prettierrc

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-organize-imports"]
 }

.vscode/settings.json

@@ -1,11 +1,11 @@
 {
-    "files.exclude": {
-        "**/.git": true,
-        "**/.svn": true,
-        "**/.hg": true,
-        "**/CVS": true,
-        "**/.DS_Store": true,
-        "**/Thumbs.db": true
-    },
-    "hide-files.files": []
-}
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true
+  },
+  "hide-files.files": []
+}

CONTRIBUTING.md

@@ -8,12 +8,12 @@ This document describes how we manage Angular version compatibility, branching,
 
 We support multiple Angular versions in parallel using **versioned branches** and **matching npm major versions**:
 
-| Git Branch | Angular Version Support | npm Version | npm Tag | Purpose |
-|------------|--------------------------|--------------|--------------|----------------------------------|
-| `main` | Angular 20+ | `20.x` | `latest` | Active development |
-| `v19` | Angular 15–19 | `19.x` | `angular19` | Maintenance only |
-| `v20` | Angular 20 | `20.x` | (optional) | Frozen once `main` moves to v21 |
-| `v21` | Angular 21 (future) | `21.x` | `latest` | Active once Angular 21 is current |
+| Git Branch | Angular Version Support | npm Version | npm Tag     | Purpose                           |
+| ---------- | ----------------------- | ----------- | ----------- | --------------------------------- |
+| `main`     | Angular 20+             | `20.x`      | `latest`    | Active development                |
+| `v19`      | Angular 15–19           | `19.x`      | `angular19` | Maintenance only                  |
+| `v20`      | Angular 20              | `20.x`      | (optional)  | Frozen once `main` moves to v21   |
+| `v21`      | Angular 21 (future)     | `21.x`      | `latest`    | Active once Angular 21 is current |
 
 ---
 
@@ -37,12 +37,14 @@ src/
 Control what is exported in each branch:
 
 ### In `main` (Angular 20):
+
 ```ts
 export * from './src/core';
 export * from './src/angular/v20/http-resource-feature';
 ```
 
 ### In `v19`:
+
 ```ts
 export * from './src/core';
 // Do not export v20 or v21 features
@@ -53,6 +55,7 @@ export * from './src/core';
 ## 🔁 npm Publishing Commands
 
 ### From `v19`:
+
 ```bash
 git checkout v19
 npm version 19.x.y
@@ -61,6 +64,7 @@ git push origin v19 --tags
 ```
 
 ### From `main` (Angular 20):
+
 ```bash
 git checkout main
 npm version 20.x.y
@@ -69,6 +73,7 @@ git push origin main --tags
 ```
 
 ### When Angular 21 is released:
+
 ```bash
 git checkout main
 git checkout -b v20 # Freeze Angular 20
@@ -84,11 +89,11 @@ npm publish # This becomes new `latest`
 ## ❌ Deprecated or Obsolete Features
 
 - If a feature becomes redundant (e.g. `signalFromObservable` now built into Angular):
-    - **Keep** it in `v19`
-    - In `main`:
-        - **Option 1:** Re-export from Angular
-        - **Option 2:** Mark as `@deprecated`
-        - **Option 3:** Remove entirely
+  - **Keep** it in `v19`
+  - In `main`:
+    - **Option 1:** Re-export from Angular
+    - **Option 2:** Mark as `@deprecated`
+    - **Option 3:** Remove entirely
 - No need to move old features to a `legacy/` folder - just delete them per branch. Git history preserves them.
 
 ---
@@ -102,6 +107,7 @@ Use a GitHub Actions matrix to test:
 - (future) `main` with Angular 21
 
 Each job should:
+
 - Verify `peerDependencies`
 - Run build, lint, test
 
@@ -111,8 +117,8 @@ Each job should:
 
 - All **new development** goes into `main`
 - If a feature is **backportable** to Angular 19:
-    - Cherry-pick into `v19`
-    - Avoid Angular 20+ APIs in `v19` (like `httpResource`, `linkedSignal`)
+  - Cherry-pick into `v19`
+  - Avoid Angular 20+ APIs in `v19` (like `httpResource`, `linkedSignal`)
 - Clearly document breaking changes in changelog
 - Update `public-api.ts` carefully in each branch
 

apps/demo/e2e/conditional.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.describe('conditional', () => {
   test.beforeEach(async ({ page }) => {

apps/demo/e2e/devtools.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from '@playwright/test';
 import { Action } from '@ngrx/store';
+import { expect, test } from '@playwright/test';
 
 test.describe('DevTools', () => {
   test('DevTools do not throw an error when not available', async ({
@@ -10,7 +10,7 @@ test.describe('DevTools', () => {
     page.on('pageerror', (error) => errors.push(error));
     await page.getByRole('link', { name: 'DevTools' }).click();
     await expect(
-      page.getByRole('row', { name: 'Go for a walk' })
+      page.getByRole('row', { name: 'Go for a walk' }),
     ).toBeVisible();
   });
 
@@ -41,7 +41,7 @@ test.describe('DevTools', () => {
       .click();
 
     await expect(
-      page.getByRole('region', { name: 'Go for a walk' })
+      page.getByRole('region', { name: 'Go for a walk' }),
     ).toBeVisible();
     await expect(page.getByRole('region', { name: 'Exercise' })).toBeVisible();
 
@@ -55,7 +55,7 @@ test.describe('DevTools', () => {
       .click();
 
     await expect(
-      page.getByRole('region', { name: 'Go for a walk' })
+      page.getByRole('region', { name: 'Go for a walk' }),
     ).toBeHidden();
     await expect(page.getByRole('region', { name: 'Exercise' })).toBeHidden();
 

apps/demo/e2e/feature-factory.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.describe('feature factory', () => {
   test.beforeEach(async ({ page }) => {

apps/demo/e2e/immutable-state.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.describe('immutable state', () => {
   test.beforeEach(async ({ page }) => {
@@ -11,7 +11,7 @@ test.describe('immutable state', () => {
       const errorInConsole = page.waitForEvent('console');
       await page.getByRole('button', { name: position }).click();
       expect((await errorInConsole).text()).toContain(
-        `Cannot assign to read only property 'id'`
+        `Cannot assign to read only property 'id'`,
       );
     });
   }
@@ -21,7 +21,7 @@ test.describe('immutable state', () => {
     await page.getByRole('textbox').focus();
     await page.keyboard.press('Space');
     expect((await errorInConsole).text()).toContain(
-      `Cannot assign to read only property 'name'`
+      `Cannot assign to read only property 'name'`,
     );
   });
 });

apps/demo/e2e/reset.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test('has title', async ({ page }) => {
   await page.goto('');
@@ -13,18 +13,18 @@ test('has title', async ({ page }) => {
     .click();
 
   await expect(
-    page.getByRole('row', { name: 'Go for a walk' }).getByRole('checkbox')
+    page.getByRole('row', { name: 'Go for a walk' }).getByRole('checkbox'),
   ).toBeChecked();
   await expect(
-    page.getByRole('row', { name: 'Exercise' }).getByRole('checkbox')
+    page.getByRole('row', { name: 'Exercise' }).getByRole('checkbox'),
   ).toBeChecked();
 
   await page.getByRole('button', { name: 'Reset State' }).click();
 
   await expect(
-    page.getByRole('row', { name: 'Go for a walk' }).getByRole('checkbox')
+    page.getByRole('row', { name: 'Go for a walk' }).getByRole('checkbox'),
   ).not.toBeChecked();
   await expect(
-    page.getByRole('row', { name: 'Exercise' }).getByRole('checkbox')
+    page.getByRole('row', { name: 'Exercise' }).getByRole('checkbox'),
   ).not.toBeChecked();
 });

apps/demo/src/app/app.component.ts

@@ -1,16 +1,16 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { MatTableModule } from '@angular/material/table';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { RouterLink, RouterOutlet } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatListModule } from '@angular/material/list';
 import {
   MatDrawer,
   MatDrawerContainer,
   MatDrawerContent,
 } from '@angular/material/sidenav';
+import { MatTableModule } from '@angular/material/table';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'demo-root',
@@ -33,7 +33,8 @@ import {
       display: inline;
     }
     .content {
-    margin: 4em;
-  }`,
+      margin: 4em;
+    }
+  `,
 })
 export class AppComponent {}