feat: output migration

juanfran · Apr 9, 2024 · 85c0f9c · 85c0f9c
1 parent d8360ab
commit 85c0f9c
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 89 deletions.
diff --git a/apps/team-up/src/app/modules/board/components/token-selector/token-selector.component.ts b/apps/team-up/src/app/modules/board/components/token-selector/token-selector.component.ts
@@ -1,11 +1,4 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  inject,
-  Output,
-  EventEmitter,
-} from '@angular/core';
-import { Store } from '@ngrx/store';
+import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import {
@@ -14,6 +7,7 @@ import {
 } from '../../../../shared/board-id-to-color.directive';
 import { RxFor } from '@rx-angular/template/for';
 import { BoardFacade } from '../../../../services/board-facade.service';
+import { output } from '@angular/core';
 
 @Component({
   selector: 'team-up-token-selector',
@@ -59,14 +53,12 @@ import { BoardFacade } from '../../../../services/board-facade.service';
   imports: [BoardIdToColorDirective, RxFor],
 })
 export class TokenSelectorComponent {
-  @Output()
-  public selectToken = new EventEmitter<{
+  public selectToken = output<{
     text: string;
     color: string;
     backgroundColor: string;
   }>();
 
-  private store = inject(Store);
   private boardFacade = inject(BoardFacade);
 
   public users = toSignal(

diff --git a/apps/team-up/src/app/modules/home/components/members/members.component.ts b/apps/team-up/src/app/modules/home/components/members/members.component.ts
@@ -4,10 +4,8 @@ import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   Input,
   OnChanges,
-  Output,
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
@@ -25,6 +23,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { Invitation, Member } from '@team-up/board-commons';
+import { output } from '@angular/core';
 
 @Component({
   selector: 'team-up-members',
@@ -190,28 +189,20 @@ export class MembersComponent implements OnChanges {
   @Input()
   public invitations: Invitation[] = [];
 
-  @Output()
-  public closeDialog = new EventEmitter<void>();
+  public closeDialog = output<void>();
 
-  @Output()
-  public invited = new EventEmitter<
-    Required<Pick<Invitation, 'email' | 'role'>>[]
-  >();
+  public invited = output<Required<Pick<Invitation, 'email' | 'role'>>[]>();
 
-  @Output()
-  public deletedInvitation = new EventEmitter<string>();
+  public deletedInvitation = output<string>();
 
-  @Output()
-  public deletedMember = new EventEmitter<string>();
+  public deletedMember = output<string>();
 
-  @Output()
-  public roleInvitationChanged = new EventEmitter<{
+  public roleInvitationChanged = output<{
     id: string;
     role: Invitation['role'];
   }>();
 
-  @Output()
-  public roleMemberChanged = new EventEmitter<{
+  public roleMemberChanged = output<{
     id: string;
     role: Member['role'];
   }>();

diff --git a/libs/board-components/src/lib/drawing/drawing.directive.ts b/libs/board-components/src/lib/drawing/drawing.directive.ts
@@ -1,9 +1,7 @@
 import {
   Directive,
   ElementRef,
-  EventEmitter,
   Input,
-  Output,
   effect,
   inject,
   signal,
@@ -23,6 +21,7 @@ import {
 import { concatLatestFrom } from '@ngrx/effects';
 import { Drawing } from '@team-up/board-commons';
 import { DrawingStore } from './drawing.store';
+import { output } from '@angular/core';
 
 export interface MouseDrawingEvent {
   x: number;
@@ -48,7 +47,7 @@ export class DrawingDirective {
   @Input()
   public canDraw = true;
 
-  @Output() drawing = new EventEmitter<Drawing[]>();
+  drawing = output<Drawing[]>();
 
   private context: CanvasRenderingContext2D;
   private elementRef = inject(ElementRef);

diff --git a/libs/nodes/src/lib/estimation/estimation-stories/estimation-stories.component.ts b/libs/nodes/src/lib/estimation/estimation-stories/estimation-stories.component.ts
@@ -1,10 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   Input,
   OnInit,
-  Output,
 } from '@angular/core';
 
 import {
@@ -20,6 +18,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { EstimationStory } from '@team-up/board-commons';
 import { v4 } from 'uuid';
+import { output } from '@angular/core';
 
 export { BoardActions } from '@team-up/board-commons/actions/board.actions';
 
@@ -109,11 +108,9 @@ export class EstimationStoriesComponent implements OnInit {
   @Input()
   public showCancel = false;
 
-  @Output()
-  public addStory = new EventEmitter<EstimationStory[]>();
+  public addStory = output<EstimationStory[]>();
 
-  @Output()
-  public closeConfig = new EventEmitter<void>();
+  public closeConfig = output<void>();
 
   public get stories() {
     return (this.form.get('stories') as FormArray).controls as FormGroup[];

diff --git a/libs/nodes/src/lib/estimation/estimation-workspace/estimation-workspace.component.ts b/libs/nodes/src/lib/estimation/estimation-workspace/estimation-workspace.component.ts
@@ -1,9 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   Input,
-  Output,
   signal,
   computed,
   inject,
@@ -18,6 +16,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { NodesStore } from '../../services/nodes.store';
+import { output } from '@angular/core';
 
 @Component({
   selector: 'team-up-estimation-workspace',
@@ -132,17 +131,14 @@ export class EstimationWorkspaceComponent {
     );
   });
 
-  @Output()
-  public setStep = new EventEmitter<number>();
+  public setStep = output<number>();
 
-  @Output()
-  public storyVisibility = new EventEmitter<{
+  public storyVisibility = output<{
     storyId: string;
     visibility: boolean;
   }>();
 
-  @Output()
-  public vote = new EventEmitter<{
+  public vote = output<{
     storyId: string;
     vote: string;
   }>();

diff --git a/libs/nodes/src/lib/estimation/init-estimation/init-estimation.component.ts b/libs/nodes/src/lib/estimation/init-estimation/init-estimation.component.ts
@@ -1,15 +1,10 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { MatSelectModule } from '@angular/material/select';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { EstimationConfig } from '@team-up/board-commons';
+import { output } from '@angular/core';
 
 @Component({
   selector: 'team-up-init-estimation',
@@ -47,8 +42,7 @@ export class InitEstimationComponent {
   @Input()
   public scale: EstimationConfig['scale'] = 't-shirt';
 
-  @Output()
-  public completeSetup = new EventEmitter<EstimationConfig['scale']>();
+  public completeSetup = output<EstimationConfig['scale']>();
 
   public onSubmit() {
     this.completeSetup.emit(this.scale);

diff --git a/libs/nodes/src/lib/poll-board/components/poll-config/poll-config.component.ts b/libs/nodes/src/lib/poll-board/components/poll-config/poll-config.component.ts
@@ -1,10 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Output,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { PollBoard, PollBoardNode, PollOption } from '@team-up/board-commons';
 import { MatIconModule } from '@angular/material/icon';
 import { v4 } from 'uuid';
@@ -18,6 +12,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { output } from '@angular/core';
 
 @Component({
   selector: 'team-up-poll-config',
@@ -124,7 +119,7 @@ import { MatInputModule } from '@angular/material/input';
 export class PollConfigComponent {
   node = input.required<PollBoardNode>();
 
-  @Output() nodeChange = new EventEmitter<Partial<PollBoard>>();
+  nodeChange = output<Partial<PollBoard>>();
 
   anonymousField = new FormControl(false);
   titleField = new FormControl('', {

diff --git a/libs/nodes/src/lib/poll-board/components/poll-options/poll-options.component.ts b/libs/nodes/src/lib/poll-board/components/poll-options/poll-options.component.ts
@@ -1,8 +1,6 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Output,
   computed,
   effect,
   inject,
@@ -22,6 +20,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatRadioModule } from '@angular/material/radio';
 import { decrypt } from '@team-up/utils/crypto';
 import { NodesStore } from '../../../services/nodes.store';
+import { output } from '@angular/core';
 
 @Component({
   selector: 'team-up-poll-options',
@@ -103,14 +102,11 @@ export class PollOptionsComponent {
     nonNullable: true,
   });
 
-  @Output()
-  vote = new EventEmitter<string>();
+  vote = output<string>();
 
-  @Output()
-  resetVote = new EventEmitter<string>();
+  resetVote = output<string>();
 
-  @Output()
-  endPoll = new EventEmitter<void>();
+  endPoll = output<void>();
 
   constructor() {
     effect(async () => {

diff --git a/libs/ui/src/lib/click-outside/click-outside.directive.ts b/libs/ui/src/lib/click-outside/click-outside.directive.ts
@@ -1,13 +1,6 @@
-import {
-  Directive,
-  ElementRef,
-  EventEmitter,
-  NgZone,
-  OnInit,
-  Output,
-  inject,
-} from '@angular/core';
+import { Directive, ElementRef, NgZone, OnInit, inject } from '@angular/core';
 import { fromEvent } from 'rxjs';
+import { output } from '@angular/core';
 
 @Directive({
   selector: '[teamUpClickOutside]',
@@ -17,7 +10,7 @@ export class ClickOutsideDirective implements OnInit {
   private elementRef = inject(ElementRef);
   private ngZone = inject(NgZone);
 
-  @Output() public teamUpClickOutside = new EventEmitter<{
+  public teamUpClickOutside = output<{
     event: MouseEvent;
     el: ElementRef;
   }>();

diff --git a/libs/ui/src/lib/editor-view/editor-view.component.ts b/libs/ui/src/lib/editor-view/editor-view.component.ts
@@ -3,11 +3,9 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
-  EventEmitter,
   HostBinding,
   Input,
   OnDestroy,
-  Output,
   Signal,
   ViewChild,
   WritableSignal,
@@ -36,6 +34,7 @@ import { Bold } from '@tiptap/extension-bold';
 import { Document } from '@tiptap/extension-document';
 import { Text } from '@tiptap/extension-text';
 import { ListItem } from '@tiptap/extension-list-item';
+import { output } from '@angular/core';
 
 @Component({
   selector: 'team-up-editor-view',
@@ -98,8 +97,7 @@ export class EditorViewComponent implements OnDestroy, AfterViewInit {
     this.#layoutToolbarOptions.set(value);
   }
 
-  @Output()
-  contentChange = new EventEmitter<string>();
+  contentChange = output<string>();
 
   @HostBinding('class.show')
   @Input()
@@ -200,7 +198,7 @@ export class EditorViewComponent implements OnDestroy, AfterViewInit {
         ],
         content: node.innerHTML,
         onUpdate: ({ editor }) => {
-          this.contentChange.next(editor.getHTML());
+          this.contentChange.emit(editor.getHTML());
         },
       }),
     );

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "lucia": "^3.0.1",
     "messageformat": "^2.3.0",
     "ngx-infinite-scroll": "^17.0.0",
-    "ngxtension": "^1.12.0",
+    "ngxtension": "^2.2.1",
     "open-props": "^1.6.12",
     "oslo": "^1.1.2",
     "postgres": "^3.3.5",