feat(ng-keyboard-sort)!: update to Angular 19 (#140)

johnhwhite · Nov 22, 2024 · b15973f · b15973f
1 parent 2ca8133
commit b15973f
Show file tree

Hide file tree

Showing 22 changed files with 7,339 additions and 5,048 deletions.
diff --git a/apps/e2e/src/app/app.component.ts b/apps/e2e/src/app/app.component.ts
@@ -1,13 +1,11 @@
 import { Component, inject } from '@angular/core';
-import { ROUTES, RouterLink, RouterOutlet } from '@angular/router';
-import { NgFor, NgIf } from '@angular/common';
+import { RouterLink, RouterOutlet, ROUTES } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  standalone: true,
-  imports: [NgFor, NgIf, RouterLink, RouterOutlet],
+  imports: [RouterLink, RouterOutlet],
 })
 export class AppComponent {
   public routes = inject(ROUTES);

diff --git a/apps/e2e/src/app/example-with-handles/example-with-handles.component.ts b/apps/e2e/src/app/example-with-handles/example-with-handles.component.ts
@@ -5,7 +5,6 @@ import {
   CdkDropList,
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
-import { NgFor } from '@angular/common';
 import {
   KeyboardSortHandleDirective,
   KeyboardSortItemDirective,
@@ -23,7 +22,6 @@ export interface Item {
   selector: 'app-example-with-handles',
   templateUrl: './example-with-handles.component.html',
   styleUrls: ['./example-with-handles.component.css'],
-  standalone: true,
   imports: [
     CdkDrag,
     CdkDropList,
@@ -32,7 +30,6 @@ export interface Item {
     KeyboardSortItemIfActiveDirective,
     KeyboardSortItemIfFocusedDirective,
     KeyboardSortListDirective,
-    NgFor,
   ],
 })
 export class ExampleWithHandlesComponent {

diff --git a/apps/e2e/src/app/example/example.component.html b/apps/e2e/src/app/example/example.component.html
@@ -14,9 +14,10 @@ <h1>Keyboard Sort Example</h1>
   kbdSortList
   cdkDropListOrientation="horizontal"
   kbdSortListOrientation="horizontal"
-  [cdkDropListData]="items"
-  [(kbdSortListData)]="items">
-  @for (item of items; track item; let i = $index) {
+  [cdkDropListData]="items()"
+  [(kbdSortListData)]="items"
+  [kbdSortListDisabled]="!enabled()">
+  @for (item of items(); track item; let i = $index) {
     <li cdkDrag cdkDragLockAxis="x" [kbdSortItem]="i">
       {{ item }}
       <span *kbdSortKeyboardSortItemIfActive class="indicator active-indicator"
@@ -28,3 +29,13 @@ <h1>Keyboard Sort Example</h1>
     </li>
   }
 </ul>
+<div>
+  <label
+    ><input [(ngModel)]="enabled" type="checkbox" /> Keyboard enabled</label
+  >
+</div>
+<div>
+  <button type="button" (click)="resetData()" (keydown.enter)="resetData()">
+    Reset data
+  </button>
+</div>
diff --git a/apps/e2e/src/app/example/example.component.spec.ts b/apps/e2e/src/app/example/example.component.spec.ts
@@ -34,7 +34,7 @@ describe('ExampleComponent', () => {
   });
 
   it('should move items up and down', () => {
-    const items = component.items;
+    const items = component.items();
     const firstItem = items[0];
     const secondItem = items[1];
     const event = {
@@ -45,4 +45,19 @@ describe('ExampleComponent', () => {
     expect(items[0]).toEqual(secondItem);
     expect(items[1]).toEqual(firstItem);
   });
+
+  it('should reset data', () => {
+    component.resetData();
+    expect(component.items()).toEqual([
+      'A',
+      'B',
+      'C',
+      'D',
+      'E',
+      'F',
+      'G',
+      'H',
+      'I',
+    ]);
+  });
 });
diff --git a/apps/e2e/src/app/example/example.component.ts b/apps/e2e/src/app/example/example.component.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, model } from '@angular/core';
 import {
   CdkDrag,
   CdkDragDrop,
   CdkDropList,
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
-import { NgFor } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import {
   KeyboardSortItemDirective,
   KeyboardSortItemIfActiveDirective,
@@ -17,22 +17,39 @@ import {
   selector: 'app-example',
   templateUrl: './example.component.html',
   styleUrls: ['./example.component.css'],
-  standalone: true,
   imports: [
     CdkDrag,
     CdkDropList,
+    FormsModule,
     KeyboardSortListDirective,
     KeyboardSortItemDirective,
     KeyboardSortItemIfActiveDirective,
     KeyboardSortItemIfFocusedDirective,
-    NgFor,
   ],
 })
 export class ExampleComponent {
-  public items: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+  public readonly items = model<string[]>([
+    'A',
+    'B',
+    'C',
+    'D',
+    'E',
+    'F',
+    'G',
+    'H',
+  ]);
+  public readonly enabled = model<boolean>(true);
 
   public drop($event: CdkDragDrop<string[]>) {
-    moveItemInArray(this.items, $event.previousIndex, $event.currentIndex);
+    const items = this.items();
+    moveItemInArray(items, $event.previousIndex, $event.currentIndex);
+    this.items.set([...items]);
+  }
+
+  public resetData(): void {
+    this.items.set(
+      [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'].slice(0, this.items().length + 1)
+    );
   }
 }
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -19,7 +19,21 @@ module.exports = tseslint.config(
       eslintConfigPrettier,
     ],
     processor: angular.processInlineTemplates,
-    rules: {},
+    rules: {
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+        },
+      ],
+      '@typescript-eslint/no-empty-function': [
+        'error',
+        {
+          allow: [],
+        },
+      ],
+    },
   },
   {
     files: ['**/*.html'],

diff --git a/libs/ng-keyboard-sort/package.json b/libs/ng-keyboard-sort/package.json
@@ -9,9 +9,9 @@
     "directory": "libs/ng-keyboard-sort"
   },
   "peerDependencies": {
-    "@angular/cdk": "^18.2.0",
-    "@angular/common": "^18.2.0",
-    "@angular/core": "^18.2.0",
+    "@angular/cdk": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
     "rxjs": "^7.8.0"
   },
   "keywords": [

diff --git a/libs/ng-keyboard-sort/src/lib/fixtures/keyboard-sort-handle-fixture.component.ts b/libs/ng-keyboard-sort/src/lib/fixtures/keyboard-sort-handle-fixture.component.ts
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { KeyboardSortHandleDirective } from '../keyboard-sort-handle.directive';
 
 @Component({
-  standalone: true,
   imports: [KeyboardSortHandleDirective],
   template: ` <div kbdSortHandle>Handle</div> `,
 })

diff --git a/libs/ng-keyboard-sort/src/lib/fixtures/keyboard-sort-item-fixture.component.ts b/libs/ng-keyboard-sort/src/lib/fixtures/keyboard-sort-item-fixture.component.ts
@@ -1,15 +1,12 @@
 import { Component, model, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { KeyboardSortHandleDirective } from '../keyboard-sort-handle.directive';
 import { KeyboardSortItemDirective } from '../keyboard-sort-item.directive';
 import { KeyboardSortListService } from '../keyboard-sort-list.service';
 import { KeyboardSortItemIfActiveDirective } from '../keyboard-sort-item-if-active.directive';
 import { KeyboardSortItemIfFocusedDirective } from '../keyboard-sort-item-if-focused.directive';
 
 @Component({
-  standalone: true,
   imports: [
-    CommonModule,
     KeyboardSortItemDirective,
     KeyboardSortHandleDirective,
     KeyboardSortItemIfActiveDirective,
@@ -23,9 +20,9 @@ import { KeyboardSortItemIfFocusedDirective } from '../keyboard-sort-item-if-foc
       [activated]="activated()"
       #item
       id="example-item">
-      <div *ngIf="showHandle" kbdSortHandle #handle class="example-handle">
-        Handle
-      </div>
+      @if (showHandle()) {
+        <div kbdSortHandle #handle class="example-handle">Handle</div>
+      }
       <span>Item 1</span>
       <span *kbdSortKeyboardSortItemIfActive #active>Active</span>
       <span *kbdSortKeyboardSortItemIfFocused #focus>Focused</span>

diff --git a/libs/ng-keyboard-sort/src/lib/fixtures/keyboard-sort-list-empty-fixture.component.ts b/libs/ng-keyboard-sort/src/lib/fixtures/keyboard-sort-list-empty-fixture.component.ts
@@ -1,10 +1,8 @@
 import { Component, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { KeyboardSortListDirective } from '../keyboard-sort-list.directive';
 
 @Component({
-  standalone: true,
-  imports: [CommonModule, KeyboardSortListDirective],
+  imports: [KeyboardSortListDirective],
   template: `<ul kbdSortList></ul>`,
 })
 export class KeyboardSortListEmptyFixtureComponent {

diff --git a/libs/ng-keyboard-sort/src/lib/fixtures/keyboard-sort-list-fixture.component.ts b/libs/ng-keyboard-sort/src/lib/fixtures/keyboard-sort-list-fixture.component.ts
@@ -5,17 +5,14 @@ import {
   ViewChild,
   ViewChildren,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { KeyboardSortItemDirective } from '../keyboard-sort-item.directive';
 import { KeyboardSortListDirective } from '../keyboard-sort-list.directive';
 import { KeyboardSortItemIfFocusedDirective } from '../keyboard-sort-item-if-focused.directive';
 import { KeyboardSortItemIfActiveDirective } from '../keyboard-sort-item-if-active.directive';
 import { KeyboardSortEventDrop } from '../keyboard-sort-event-drop';
 
 @Component({
-  standalone: true,
   imports: [
-    CommonModule,
     KeyboardSortListDirective,
     KeyboardSortItemDirective,
     KeyboardSortItemIfFocusedDirective,
@@ -25,7 +22,7 @@ import { KeyboardSortEventDrop } from '../keyboard-sort-event-drop';
     <a href="#item-0">Start</a>
     <ul
       kbdSortList
-      [kbdSortListData]="data() || []"
+      [(kbdSortListData)]="data"
       [kbdSortListOrientation]="direction()"
       [kbdSortListDisabled]="disabled()"
       (kdbSortDrop)="sortDrop($event)">

diff --git a/libs/ng-keyboard-sort/src/lib/keyboard-sort-item-if-active.directive.spec.ts b/libs/ng-keyboard-sort/src/lib/keyboard-sort-item-if-active.directive.spec.ts
@@ -4,7 +4,6 @@ import { KeyboardSortItemIfActiveDirective } from 'ng-keyboard-sort';
 import { KeyboardSortItemService } from './keyboard-sort-item.service';
 
 @Component({
-  standalone: true,
   selector: 'kbd-sort-test-component',
   template: ` <div *kbdSortKeyboardSortItemIfActive></div> `,
   imports: [KeyboardSortItemIfActiveDirective],
@@ -20,7 +19,7 @@ describe('KeyboardSortItemIfActiveDirective', () => {
       providers: [
         {
           provide: KeyboardSortItemService,
-          useValue: { item: { activated, isDisabled } },
+          useValue: { item: signal({ activated, isDisabled }) },
         },
       ],
     });

diff --git a/libs/ng-keyboard-sort/src/lib/keyboard-sort-item-if-active.directive.ts b/libs/ng-keyboard-sort/src/lib/keyboard-sort-item-if-active.directive.ts
@@ -19,9 +19,7 @@ export class KeyboardSortItemIfActiveDirective {
 
   constructor() {
     effect(() => {
-      const activated = !!this.#item?.activated();
-      const enabled = !this.#item?.isDisabled();
-      const shouldShow = activated && enabled;
+      const shouldShow = !!this.#item()?.activated();
       if (shouldShow && !this.#hasView) {
         this.#viewContainer.createEmbeddedView(this.#templateRef);
         this.#hasView = true;

diff --git a/libs/ng-keyboard-sort/src/lib/keyboard-sort-item-if-focused.directive.spec.ts b/libs/ng-keyboard-sort/src/lib/keyboard-sort-item-if-focused.directive.spec.ts
@@ -4,7 +4,6 @@ import { KeyboardSortItemIfFocusedDirective } from 'ng-keyboard-sort';
 import { KeyboardSortItemService } from './keyboard-sort-item.service';
 
 @Component({
-  standalone: true,
   selector: 'kbd-sort-test-component',
   template: ` <div *kbdSortKeyboardSortItemIfFocused></div> `,
   imports: [KeyboardSortItemIfFocusedDirective],
@@ -20,7 +19,7 @@ describe('KeyboardSortItemIfFocusedDirective', () => {
       providers: [
         {
           provide: KeyboardSortItemService,
-          useValue: { item: { focused, isDisabled } },
+          useValue: { item: signal({ focused, isDisabled }) },
         },
       ],
     });

diff --git a/libs/ng-keyboard-sort/src/lib/keyboard-sort-item-if-focused.directive.ts b/libs/ng-keyboard-sort/src/lib/keyboard-sort-item-if-focused.directive.ts
@@ -19,9 +19,7 @@ export class KeyboardSortItemIfFocusedDirective {
 
   constructor() {
     effect(() => {
-      const focused = !!this.#item?.focused();
-      const enabled = !this.#item?.isDisabled();
-      const shouldShow = focused && enabled;
+      const shouldShow = !!this.#item()?.focused();
       if (shouldShow && !this.#hasView) {
         this.#viewContainer.createEmbeddedView(this.#templateRef);
         this.#hasView = true;

diff --git a/libs/ng-keyboard-sort/src/lib/keyboard-sort-item.directive.spec.ts b/libs/ng-keyboard-sort/src/lib/keyboard-sort-item.directive.spec.ts
@@ -131,7 +131,6 @@ describe('ItemDirective', () => {
     setupTest();
     const item = component.item;
     expect(item).toBeTruthy();
-    item?.ngAfterViewInit();
     expect(item?.activated()).toBeFalse();
     item?.elementRef.nativeElement.dispatchEvent(
       new KeyboardEvent('keydown', { key: 'Enter' })