feat: use new signal queries (#4)

* feat: use new signal queries * feat: use new model inputs and outputs * docs: update min angular version to 17.3.0 * docs: update min angular version to 17.3.0
tutkli · Apr 1, 2024 · bde803e · bde803e
1 parent c7775a2
commit bde803e
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Based on [emilkowalski](https://github.com/emilkowalski)'s React [implementation
 
 ## Angular compatibility
 
-Make sure you are using Angular v17.2.0 or greater
+Make sure you are using Angular v17.3.0 or greater
 
 ## Quick start
 

diff --git a/apps/docs/src/app/app.component.ts b/apps/docs/src/app/app.component.ts
@@ -36,15 +36,9 @@ import { UsageComponent } from './components/usage.component';
         <docs-installation />
         <docs-usage />
         <docs-types />
-        <docs-position
-          [position]="position()"
-          (positionChange)="position.set($event)" />
-        <docs-expand [expand]="expand()" (expandChange)="expand.set($event)" />
-        <docs-other
-          [richColors]="richColors()"
-          (richColorsChange)="richColors.set($event)"
-          [closeButton]="closeButton()"
-          (closeButtonChange)="closeButton.set($event)" />
+        <docs-position [(position)]="position" />
+        <docs-expand [(expand)]="expand" />
+        <docs-other [(richColors)]="richColors" [(closeButton)]="closeButton" />
       </div>
     </main>
     <docs-footer />

diff --git a/apps/docs/src/app/components/code-block.component.ts b/apps/docs/src/app/components/code-block.component.ts
@@ -8,7 +8,7 @@ import {
   inject,
   input,
   signal,
-  ViewChild,
+  viewChild,
 } from '@angular/core';
 import hljs from 'highlight.js/lib/core';
 import javascript from 'highlight.js/lib/languages/javascript';
@@ -138,7 +138,7 @@ export class CodeBlockComponent {
   code = input.required<string>();
   _class = input<string>('', { alias: 'class' });
 
-  @ViewChild('codeElement') codeElement!: ElementRef<HTMLElement>;
+  codeElement = viewChild.required<ElementRef<HTMLElement>>('codeElement');
 
   copying = signal(false);
   cannotDetectLanguage = computed(
@@ -168,9 +168,7 @@ export class CodeBlockComponent {
 
   constructor() {
     effect(() => {
-      if (this.codeElement?.nativeElement) {
-        this.codeElement.nativeElement.innerHTML = this.highlightedCode();
-      }
+      this.codeElement().nativeElement.innerHTML = this.highlightedCode();
     });
   }
 

diff --git a/apps/docs/src/app/components/expand.component.ts b/apps/docs/src/app/components/expand.component.ts
@@ -2,9 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  EventEmitter,
-  input,
-  Output,
+  model,
 } from '@angular/core';
 import { toast } from 'ngx-sonner';
 import { CodeBlockComponent } from './code-block.component';
@@ -41,8 +39,7 @@ import { CodeBlockComponent } from './code-block.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExpandComponent {
-  expand = input.required<boolean>();
-  @Output() expandChange = new EventEmitter<boolean>();
+  expand = model.required<boolean>();
 
   expandSnippet = computed(
     () => `<ngx-sonner-toaster [expand]="${this.expand()}" />`
@@ -52,13 +49,13 @@ export class ExpandComponent {
     toast('Event has been created', {
       description: 'Monday, January 3rd at 6:00pm',
     });
-    this.expandChange.emit(true);
+    this.expand.set(true);
   }
 
   collapseToasts() {
     toast('Event has been created', {
       description: 'Monday, January 3rd at 6:00pm',
     });
-    this.expandChange.emit(false);
+    this.expand.set(false);
   }
 }
diff --git a/apps/docs/src/app/components/other.component.ts b/apps/docs/src/app/components/other.component.ts
@@ -2,9 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  EventEmitter,
-  input,
-  Output,
+  model,
   signal,
 } from '@angular/core';
 import { toast } from 'ngx-sonner';
@@ -39,43 +37,40 @@ import { TestComponent } from './test.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OtherComponent {
-  closeButton = input.required<boolean>();
-  @Output() closeButtonChange = new EventEmitter<boolean>();
-
-  richColors = input.required<boolean>();
-  @Output() richColorsChange = new EventEmitter<boolean>();
+  closeButton = model.required<boolean>();
+  richColors = model.required<boolean>();
 
   allTypes = [
     {
       name: 'Rich Colors Success',
       snippet: "toast.success('Event has been created')",
       action: () => {
         toast.success('Event has been created');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
       name: 'Rich Colors Error',
       snippet: "toast.error('Event has not been created')",
       action: () => {
         toast.error('Event has not been created');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
       name: 'Rich Colors Info',
       snippet: "toast.info('Info')",
       action: () => {
         toast.info('Be at the area 10 minutes before the event time');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
       name: 'Rich Colors Warning',
       snippet: "toast.warning('Warning')",
       action: () => {
         toast.warning('Event start time cannot be earlier than 8am');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
@@ -87,7 +82,7 @@ export class OtherComponent {
         toast('Event has been created', {
           description: 'Monday, January 3rd at 6:00pm',
         });
-        this.closeButtonChange.emit(!this.closeButton());
+        this.closeButton.set(!this.closeButton());
       },
     },
     {

diff --git a/apps/docs/src/app/components/position.component.ts b/apps/docs/src/app/components/position.component.ts
@@ -2,13 +2,22 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  EventEmitter,
-  input,
-  Output,
+  model,
 } from '@angular/core';
 import { toast } from 'ngx-sonner';
 import { CodeBlockComponent } from './code-block.component';
 
+const positions = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right',
+] as const;
+
+type Position = (typeof positions)[number];
+
 @Component({
   selector: 'docs-position',
   standalone: true,
@@ -33,36 +42,26 @@ import { CodeBlockComponent } from './code-block.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PositionComponent {
-  positions = [
-    'top-left',
-    'top-center',
-    'top-right',
-    'bottom-left',
-    'bottom-center',
-    'bottom-right',
-  ] as const;
-
-  position = input.required<(typeof this.positions)[number]>();
+  protected positions = positions;
 
-  @Output() positionChange = new EventEmitter<
-    (typeof this.positions)[number]
-  >();
+  position = model.required<Position>();
 
   positionSnippet = computed(
     () => `<ngx-sonner-toaster position="${this.position()}" />`
   );
 
-  showToast(position: (typeof this.positions)[number]) {
+  showToast(position: Position) {
     const toastsAmount = document.querySelectorAll(
       '[data-sonner-toast]'
     ).length;
-    this.positionChange.emit(position);
 
     // No need to show a toast when there is already one
-    if (toastsAmount > 0 && position !== this.position()) return;
+    if (toastsAmount === 0 || position === this.position()) {
+      toast('Event has been created', {
+        description: 'Monday, January 3rd at 6:00pm',
+      });
+    }
 
-    toast('Event has been created', {
-      description: 'Monday, January 3rd at 6:00pm',
-    });
+    this.position.set(position);
   }
 }
diff --git a/apps/docs/src/app/components/test.component.ts b/apps/docs/src/app/components/test.component.ts
@@ -1,9 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   input,
-  Output,
+  output,
 } from '@angular/core';
 
 @Component({
@@ -75,5 +74,5 @@ import {
 })
 export class TestComponent {
   eventName = input.required<string>();
-  @Output() closeToast = new EventEmitter<void>();
+  closeToast = output<void>();
 }
diff --git a/libs/ngx-sonner/README.md b/libs/ngx-sonner/README.md
@@ -6,7 +6,7 @@ Based on [emilkowalski](https://github.com/emilkowalski)'s React [implementation
 
 ## Angular compatibility
 
-Make sure you are using Angular v17.2.0 or greater
+Make sure you are using Angular v17.3.0 or greater
 
 ## Quick start
 

diff --git a/libs/ngx-sonner/package.json b/libs/ngx-sonner/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ngx-sonner",
   "description": "An opinionated toast component for Angular.",
-  "version": "0.3.0",
+  "version": "0.0.0",
   "bugs": {
     "url": "https://github.com/tutkli/ngx-sonner/issues"
   },
@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=17.1.0",
-    "@angular/core": ">=17.1.0"
+    "@angular/common": ">=17.3.0",
+    "@angular/core": ">=17.3.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
@@ -10,7 +10,7 @@ import {
   OnDestroy,
   signal,
   untracked,
-  ViewChild,
+  viewChild,
 } from '@angular/core';
 import { cn } from './internal/cn';
 import { AsComponentPipe } from './pipes/as-component.pipe';
@@ -236,8 +236,7 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
   offsetBeforeRemove = signal(0);
   initialHeight = signal(0);
 
-  // viewChild.required<ElementRef<HTMLLIElement>>('toastRef')
-  @ViewChild('toastRef') toastRef!: ElementRef<HTMLLIElement>;
+  toastRef = viewChild.required<ElementRef<HTMLLIElement>>('toastRef');
 
   classes: any = computed(() => ({
     ...defaultClasses,
@@ -344,7 +343,7 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
     this.remainingTime =
       this.toast().duration ?? this.duration() ?? TOAST_LIFETIME;
     this.mounted.set(true);
-    const height = this.toastRef.nativeElement.getBoundingClientRect().height;
+    const height = this.toastRef().nativeElement.getBoundingClientRect().height;
     this.initialHeight.set(height);
     this.addHeight({ toastId: this.toast().id, height });
   }
@@ -408,8 +407,8 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
 
     this.pointerStartRef = null;
     const swipeAmount = Number(
-      this.toastRef.nativeElement.style
-        .getPropertyValue('--swipe-amount')
+      this.toastRef()
+        .nativeElement.style.getPropertyValue('--swipe-amount')
         .replace('px', '') || 0
     );
 
@@ -422,7 +421,7 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
       return;
     }
 
-    this.toastRef.nativeElement.style.setProperty('--swipe-amount', '0px');
+    this.toastRef().nativeElement.style.setProperty('--swipe-amount', '0px');
     this.swiping.set(false);
   }
 
@@ -438,7 +437,7 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
     const isAllowedToSwipe = Math.abs(clampedY) > swipeStartThreshold;
 
     if (isAllowedToSwipe) {
-      this.toastRef.nativeElement.style.setProperty(
+      this.toastRef().nativeElement.style.setProperty(
         '--swipe-amount',
         `${yPosition}px`
       );

diff --git a/libs/ngx-sonner/src/lib/toaster.component.ts b/libs/ngx-sonner/src/lib/toaster.component.ts
@@ -13,7 +13,7 @@ import {
   PLATFORM_ID,
   signal,
   untracked,
-  ViewChild,
+  viewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import { IconComponent } from './icon.component';
@@ -159,8 +159,7 @@ export class NgxSonnerToaster implements OnDestroy {
   interacting = signal(false);
   actualTheme = signal(this.getActualTheme(this.theme()));
 
-  // viewChild<HTMLOListElement>('listRef');
-  @ViewChild('listRef') listRef!: ElementRef<HTMLOListElement>;
+  listRef = viewChild<ElementRef<HTMLOListElement>>('listRef');
   lastFocusedElementRef = signal<HTMLElement | null>(null);
   isFocusWithinRef = signal(false);
 
@@ -239,21 +238,22 @@ export class NgxSonnerToaster implements OnDestroy {
   }
 
   private handleKeydown = (event: KeyboardEvent) => {
-    if (!this.listRef?.nativeElement) return;
+    const listRef = this.listRef()?.nativeElement;
+    if (!listRef) return;
 
     const isHotkeyPressed = this.hotKey().every(
       key => (event as never)[key] || event.code === key
     );
 
     if (isHotkeyPressed) {
       this.expanded.set(true);
-      this.listRef.nativeElement?.focus();
+      listRef.focus();
     }
 
     if (
       event.code === 'Escape' &&
-      (document.activeElement === this.listRef.nativeElement ||
-        this.listRef.nativeElement?.contains(document.activeElement))
+      (document.activeElement === listRef ||
+        listRef.contains(document.activeElement))
     ) {
       this.expanded.set(false);
     }