feat: update to angular v19

BREAKING CHANGE: minimal angular version is now v19
tutkli · Dec 9, 2024 · bf70b01 · bf70b01
1 parent cc5831a
commit bf70b01
Show file tree

Hide file tree

Showing 19 changed files with 8,481 additions and 7,309 deletions.
diff --git a/.gitignore b/.gitignore
@@ -39,4 +39,5 @@ testem.log
 Thumbs.db
 
 .nx/cache
+.nx/workspace-data
 .angular
diff --git a/.prettierignore b/.prettierignore
@@ -3,3 +3,5 @@
 /coverage
 /.nx/cache
 .angular
+
+/.nx/workspace-data
diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json
@@ -24,7 +24,8 @@
             "prefix": "docs",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

diff --git a/apps/docs/src/app/app.component.ts b/apps/docs/src/app/app.component.ts
@@ -10,20 +10,19 @@ import { TypeComponent } from './components/types.component';
 import { UsageComponent } from './components/usage.component';
 
 @Component({
-  selector: 'docs-root',
-  standalone: true,
-  imports: [
-    NgxSonnerToaster,
-    HeroComponent,
-    InstallationComponent,
-    UsageComponent,
-    TypeComponent,
-    PositionComponent,
-    ExpandComponent,
-    OtherComponent,
-    FooterComponent,
-  ],
-  template: `
+    selector: 'docs-root',
+    imports: [
+        NgxSonnerToaster,
+        HeroComponent,
+        InstallationComponent,
+        UsageComponent,
+        TypeComponent,
+        PositionComponent,
+        ExpandComponent,
+        OtherComponent,
+        FooterComponent,
+    ],
+    template: `
     <ngx-sonner-toaster
       [expand]="expand()"
       [position]="position()"
@@ -43,7 +42,7 @@ import { UsageComponent } from './components/usage.component';
     </main>
     <docs-footer />
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
   expand = signal(false);

diff --git a/apps/docs/src/app/components/expand.component.ts b/apps/docs/src/app/components/expand.component.ts
@@ -8,10 +8,9 @@ import { toast } from 'ngx-sonner';
 import { CodeBlockComponent } from './code-block.component';
 
 @Component({
-  selector: 'docs-expand',
-  standalone: true,
-  imports: [CodeBlockComponent],
-  template: `
+    selector: 'docs-expand',
+    imports: [CodeBlockComponent],
+    template: `
     <div>
       <h2>Expand</h2>
       <p>
@@ -36,7 +35,7 @@ import { CodeBlockComponent } from './code-block.component';
       <docs-code-block [code]="expandSnippet()" />
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ExpandComponent {
   expand = model.required<boolean>();

diff --git a/apps/docs/src/app/components/other.component.ts b/apps/docs/src/app/components/other.component.ts
@@ -11,10 +11,9 @@ import { TestWithInputsComponent } from './test-with-inputs.component';
 import { TestComponent } from './test.component';
 
 @Component({
-  selector: 'docs-other',
-  standalone: true,
-  imports: [CodeBlockComponent],
-  template: `
+    selector: 'docs-other',
+    imports: [CodeBlockComponent],
+    template: `
     <div>
       <h2>Other</h2>
       <div class="buttons">
@@ -34,7 +33,7 @@ import { TestComponent } from './test.component';
       <docs-code-block [code]="codeSnipped()" />
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class OtherComponent {
   closeButton = model.required<boolean>();

diff --git a/apps/docs/src/app/components/position.component.ts b/apps/docs/src/app/components/position.component.ts
@@ -19,10 +19,9 @@ const positions = [
 type Position = (typeof positions)[number];
 
 @Component({
-  selector: 'docs-position',
-  standalone: true,
-  imports: [CodeBlockComponent],
-  template: `
+    selector: 'docs-position',
+    imports: [CodeBlockComponent],
+    template: `
     <div>
       <h2>Position</h2>
       <p>Swipe direction changes depending on the position.</p>
@@ -39,7 +38,7 @@ type Position = (typeof positions)[number];
       <docs-code-block [code]="positionSnippet()" />
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PositionComponent {
   protected positions = positions;

diff --git a/apps/docs/src/app/components/types.component.ts b/apps/docs/src/app/components/types.component.ts
@@ -4,10 +4,9 @@ import { CodeBlockComponent } from './code-block.component';
 import { CustomComponent } from './custom.component';
 
 @Component({
-  selector: 'docs-types',
-  standalone: true,
-  imports: [CodeBlockComponent],
-  template: `
+    selector: 'docs-types',
+    imports: [CodeBlockComponent],
+    template: `
     <div>
       <h2>Types</h2>
       <p>
@@ -28,7 +27,7 @@ import { CustomComponent } from './custom.component';
       <docs-code-block [code]="activeType().snippet" />
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TypeComponent {
   allTypes = [

diff --git a/apps/docs/src/app/components/usage.component.ts b/apps/docs/src/app/components/usage.component.ts
@@ -3,17 +3,16 @@ import { CodeBlockComponent } from './code-block.component';
 import { usageSnippet } from './code-snippets';
 
 @Component({
-  selector: 'docs-usage',
-  standalone: true,
-  imports: [CodeBlockComponent],
-  template: `
+    selector: 'docs-usage',
+    imports: [CodeBlockComponent],
+    template: `
     <div>
       <h2>Usage</h2>
       <p>Render the toaster in the root of your app.</p>
       <docs-code-block [code]="usageSnippet" />
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UsageComponent {
   protected readonly usageSnippet = usageSnippet;

diff --git a/jest.config.ts b/jest.config.ts
@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-  projects: getJestProjects(),
-};
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});
diff --git a/libs/ngx-sonner/.eslintrc.json b/libs/ngx-sonner/.eslintrc.json
@@ -24,7 +24,8 @@
             "prefix": "ngx-sonner",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

diff --git a/libs/ngx-sonner/README.md b/libs/ngx-sonner/README.md
@@ -8,6 +8,7 @@ Based on [emilkowalski](https://github.com/emilkowalski)'s React [implementation
 
 | ngx-sonner | @angular |
 |------------|----------|
+| 3.0.0      | ≥19.0.0  |
 | 2.0.0      | ≥18.0.0  |
 | 1.0.0      | ≥17.3.0  |
 

diff --git a/libs/ngx-sonner/package.json b/libs/ngx-sonner/package.json
@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=18.0.0",
-    "@angular/core": ">=18.0.0"
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

diff --git a/libs/ngx-sonner/src/lib/toast.component.ts b/libs/ngx-sonner/src/lib/toast.component.ts
@@ -26,10 +26,9 @@ import { toastState } from './state';
 import { ToastProps } from './types';
 
 @Component({
-  selector: 'ngx-sonner-toast',
-  standalone: true,
-  imports: [NgComponentOutlet, IsStringPipe, AsComponentPipe],
-  template: `
+    selector: 'ngx-sonner-toast',
+    imports: [NgComponentOutlet, IsStringPipe, AsComponentPipe],
+    template: `
     <li
       #toastRef
       data-sonner-toast
@@ -179,7 +178,7 @@ import { ToastProps } from './types';
       }
     </li>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToastComponent implements AfterViewInit, OnDestroy {
   protected readonly cn = cn;

diff --git a/libs/ngx-sonner/src/lib/toaster.component.ts b/libs/ngx-sonner/src/lib/toaster.component.ts
@@ -31,10 +31,9 @@ import { ToastComponent } from './toast.component';
 import { Position, Theme, ToasterProps } from './types';
 
 @Component({
-  selector: 'ngx-sonner-toaster',
-  standalone: true,
-  imports: [ToastComponent, ToastFilterPipe, IconComponent, LoaderComponent],
-  template: `
+    selector: 'ngx-sonner-toaster',
+    imports: [ToastComponent, ToastFilterPipe, IconComponent, LoaderComponent],
+    template: `
     @if (toasts().length > 0) {
       <section
         [attr.aria-label]="'Notifications ' + hotKeyLabel()"
@@ -101,9 +100,9 @@ import { Position, Theme, ToasterProps } from './types';
       </section>
     }
   `,
-  styleUrl: 'toaster.component.css',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrl: 'toaster.component.css',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class NgxSonnerToaster implements OnDestroy {

diff --git a/libs/ngx-sonner/src/tests/toaster-test.component.ts b/libs/ngx-sonner/src/tests/toaster-test.component.ts
@@ -11,10 +11,9 @@ export type ToastTestInputs = {
 };
 
 @Component({
-  selector: 'ngx-sonner-test',
-  standalone: true,
-  imports: [NgxSonnerToaster],
-  template: `
+    selector: 'ngx-sonner-test',
+    imports: [NgxSonnerToaster],
+    template: `
     <ngx-sonner-toaster
       [dir]="dir()"
       [theme]="theme()"
@@ -38,7 +37,7 @@ export type ToastTestInputs = {
     </ngx-sonner-toaster>
     <button data-testid="trigger" (click)="onClick()">Trigger</button>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToasterTestComponent {
   callback = input.required<ToastTestInputs['callback']>();

diff --git a/nx.json b/nx.json
@@ -61,5 +61,6 @@
       "style": "css"
     }
   },
-  "defaultBase": "master"
+  "defaultBase": "master",
+  "useLegacyCache": true
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,8 @@ @@
                 "prefix": "docs",
                 "style": "kebab-case"
               }
-            ]
+            ],
+            "@angular-eslint/prefer-standalone": "off"
           }
         },
         {
@@ Expand Down @@