perf(track-by): use track by on all ngFor elements

Fixes #444

Author: Matt Lewis

package-lock.json

@@ -184,7 +184,7 @@
   "dependencies": {
     "angular-draggable-droppable": "^2.0.0",
     "angular-resizable-element": "^2.0.0",
-    "calendar-utils": "^0.1.0",
+    "calendar-utils": "^0.1.1",
     "date-fns": "^1.28.5",
     "positioning": "^1.3.1"
   }

package.json

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { CalendarEvent } from 'calendar-utils';
+import { trackByIndex } from './util';
 
 @Component({
   selector: 'mwl-calendar-event-actions',
@@ -8,7 +9,7 @@ import { CalendarEvent } from 'calendar-utils';
       <a
         class="cal-event-action"
         href="javascript:;"
-        *ngFor="let action of event.actions"
+        *ngFor="let action of event.actions; trackBy:trackByIndex"
         (mwlClick)="action.onClick({event: event})"
         [ngClass]="action.cssClass"
         [innerHtml]="action.label">
@@ -18,4 +19,5 @@ import { CalendarEvent } from 'calendar-utils';
 })
 export class CalendarEventActionsComponent {
   @Input() event: CalendarEvent;
+  trackByIndex = trackByIndex;
 }

src/modules/common/calendar-event-actions.component.ts

@@ -1,6 +1,7 @@
 import {
   CalendarEvent,
-  validateEvents as validateEventsWithoutLog
+  validateEvents as validateEventsWithoutLog,
+  WeekDay
 } from 'calendar-utils';
 
 export const validateEvents = (events: CalendarEvent[]) => {
@@ -20,3 +21,11 @@ export function isInside(outer: ClientRect, inner: ClientRect): boolean {
     inner.bottom <= outer.bottom
   );
 }
+
+export const trackByEventId = (index: number, event: CalendarEvent) =>
+  event.id ? event.id : event;
+
+export const trackByWeekDayHeaderDate = (index: number, day: WeekDay) =>
+  day.date.toISOString();
+
+export const trackByIndex = (index: number) => index;

src/modules/common/util.ts

@@ -27,7 +27,7 @@ import { CalendarDragHelper } from '../common/calendar-drag-helper.provider';
 import { CalendarResizeHelper } from '../common/calendar-resize-helper.provider';
 import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-changed-event.interface';
 import { CalendarUtils } from '../common/calendar-utils.provider';
-import { validateEvents } from '../common/util';
+import { validateEvents, trackByEventId } from '../common/util';
 
 export interface CalendarDayViewBeforeRenderEvent {
   body: {
@@ -65,7 +65,7 @@ export interface DayViewEventResize {
   template: `
     <div class="cal-day-view" #dayViewContainer>
       <mwl-calendar-all-day-event
-        *ngFor="let event of view.allDayEvents"
+        *ngFor="let event of view.allDayEvents; trackBy:trackByEventId"
         [event]="event"
         [customTemplate]="allDayEventTemplate"
         [eventTitleTemplate]="eventTitleTemplate"
@@ -75,7 +75,7 @@ export interface DayViewEventResize {
         <div class="cal-events">
           <div
             #event
-            *ngFor="let dayEvent of view?.events"
+            *ngFor="let dayEvent of view?.events; trackBy:trackByDayEvent"
             class="cal-event-container"
             [class.cal-draggable]="dayEvent.event.draggable"
             [class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
@@ -109,9 +109,9 @@ export interface DayViewEventResize {
             </mwl-calendar-day-view-event>
           </div>
         </div>
-        <div class="cal-hour" *ngFor="let hour of hours" [style.minWidth.px]="view?.width + 70">
+        <div class="cal-hour" *ngFor="let hour of hours; trackBy:trackByHour" [style.minWidth.px]="view?.width + 70">
           <mwl-calendar-day-view-hour-segment
-            *ngFor="let segment of hour.segments"
+            *ngFor="let segment of hour.segments; trackBy:trackByHourSegment"
             [style.height.px]="hourSegmentHeight"
             [segment]="segment"
             [segmentHeight]="hourSegmentHeight"
@@ -290,6 +290,29 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   validateResize: (args: any) => boolean;
 
+  /**
+   * @hidden
+   */
+  trackByEventId = trackByEventId;
+
+  /**
+   * @hidden
+   */
+  trackByDayEvent = (index: number, dayEvent: DayViewEvent) =>
+    dayEvent.event.id ? dayEvent.event.id : dayEvent.event;
+
+  /**
+   * @hidden
+   */
+  trackByHour = (index: number, hour: DayViewHour) =>
+    hour.segments[0].date.toISOString();
+
+  /**
+   * @hidden
+   */
+  trackByHourSegment = (index: number, segment: DayViewHourSegment) =>
+    segment.date.toISOString();
+
   /**
    * @hidden
    */

src/modules/day/calendar-day-view.component.ts

@@ -6,6 +6,7 @@ import {
   TemplateRef
 } from '@angular/core';
 import { MonthViewDay, CalendarEvent } from 'calendar-utils';
+import { trackByEventId } from '../common/util';
 
 @Component({
   selector: 'mwl-calendar-month-cell',
@@ -28,7 +29,7 @@ import { MonthViewDay, CalendarEvent } from 'calendar-utils';
       <div class="cal-events" *ngIf="day.events.length > 0">
         <div
           class="cal-event"
-          *ngFor="let event of day.events"
+          *ngFor="let event of day.events; trackBy:trackByEventId"
           [style.backgroundColor]="event.color.primary"
           [ngClass]="event?.cssClass"
           (mouseenter)="highlightDay.emit({event: event})"
@@ -96,4 +97,6 @@ export class CalendarMonthCellComponent {
   eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
     event: CalendarEvent;
   }>();
+
+  trackByEventId = trackByEventId;
 }

src/modules/month/calendar-month-cell.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, TemplateRef } from '@angular/core';
 import { WeekDay } from 'calendar-utils';
+import { trackByWeekDayHeaderDate } from '../common/util';
 
 @Component({
   selector: 'mwl-calendar-month-view-header',
@@ -11,7 +12,7 @@ import { WeekDay } from 'calendar-utils';
       <div class="cal-cell-row cal-header">
         <div
           class="cal-cell"
-          *ngFor="let day of days"
+          *ngFor="let day of days; trackBy:trackByWeekDayHeaderDate"
           [class.cal-past]="day.isPast"
           [class.cal-today]="day.isToday"
           [class.cal-future]="day.isFuture"
@@ -33,4 +34,6 @@ export class CalendarMonthViewHeaderComponent {
   @Input() locale: string;
 
   @Input() customTemplate: TemplateRef<any>;
+
+  trackByWeekDayHeaderDate = trackByWeekDayHeaderDate;
 }

src/modules/month/calendar-month-view-header.component.ts

@@ -31,7 +31,7 @@ import differenceInSeconds from 'date-fns/difference_in_seconds/index';
 import addSeconds from 'date-fns/add_seconds/index';
 import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-changed-event.interface';
 import { CalendarUtils } from '../common/calendar-utils.provider';
-import { validateEvents } from '../common/util';
+import { validateEvents, trackByIndex } from '../common/util';
 
 export interface CalendarMonthViewBeforeRenderEvent {
   header: WeekDay[];
@@ -59,10 +59,10 @@ export interface CalendarMonthViewBeforeRenderEvent {
         [customTemplate]="headerTemplate">
       </mwl-calendar-month-view-header>
       <div class="cal-days">
-        <div *ngFor="let rowIndex of view.rowOffsets">
+        <div *ngFor="let rowIndex of view.rowOffsets; trackByIndex">
           <div class="cal-cell-row">
             <mwl-calendar-month-cell
-              *ngFor="let day of view.days | slice : rowIndex : rowIndex + (view.totalDaysVisibleInWeek)"
+              *ngFor="let day of (view.days | slice : rowIndex : rowIndex + (view.totalDaysVisibleInWeek)); trackBy:trackByDate"
               [class.cal-drag-over]="day.dragOver"
               [ngClass]="day?.cssClass"
               [day]="day"
@@ -230,6 +230,16 @@ export class CalendarMonthViewComponent
    */
   refreshSubscription: Subscription;
 
+  /**
+   * @hidden
+   */
+  trackByIndex = trackByIndex;
+
+  /**
+   * @hidden
+   */
+  trackByDate = (index: number, day: MonthViewDay) => day.date.toISOString();
+
   /**
    * @hidden
    */

src/modules/month/calendar-month-view.component.ts

@@ -7,6 +7,7 @@ import {
 } from '@angular/core';
 import { trigger, style, transition, animate } from '@angular/animations';
 import { CalendarEvent } from 'calendar-utils';
+import { trackByEventId } from '../common/util';
 
 @Component({
   selector: 'mwl-calendar-open-day-events',
@@ -16,7 +17,7 @@ import { CalendarEvent } from 'calendar-utils';
       let-events="events"
       let-eventClicked="eventClicked">
       <div
-        *ngFor="let event of events"
+        *ngFor="let event of events; trackBy:trackByEventId"
         [ngClass]="event?.cssClass"
         mwlDraggable
         [dropData]="{event: event}"
@@ -70,4 +71,6 @@ export class CalendarOpenDayEventsComponent {
   eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
     event: CalendarEvent;
   }>();
+
+  trackByEventId = trackByEventId;
 }

src/modules/month/calendar-open-day-events.component.ts

@@ -6,6 +6,7 @@ import {
   TemplateRef
 } from '@angular/core';
 import { CalendarEvent, WeekDay } from 'calendar-utils';
+import { trackByWeekDayHeaderDate } from '../common/util';
 
 @Component({
   selector: 'mwl-calendar-week-view-header',
@@ -19,7 +20,7 @@ import { CalendarEvent, WeekDay } from 'calendar-utils';
       <div class="cal-day-headers">
         <div
           class="cal-header"
-          *ngFor="let day of days"
+          *ngFor="let day of days; trackBy:trackByWeekDayHeaderDate"
           [class.cal-past]="day.isPast"
           [class.cal-today]="day.isToday"
           [class.cal-future]="day.isFuture"
@@ -59,4 +60,6 @@ export class CalendarWeekViewHeaderComponent {
     event: CalendarEvent;
     newStart: Date;
   }> = new EventEmitter<{ event: CalendarEvent; newStart: Date }>();
+
+  trackByWeekDayHeaderDate = trackByWeekDayHeaderDate;
 }

src/modules/week/calendar-week-view-header.component.ts

@@ -17,18 +17,16 @@ import {
   WeekDay,
   CalendarEvent,
   WeekViewEvent,
-  WeekViewEventRow,
   WeekView,
-  ViewPeriod,
-  MonthViewDay
+  ViewPeriod
 } from 'calendar-utils';
 import { ResizeEvent } from 'angular-resizable-element';
 import addDays from 'date-fns/add_days/index';
 import { CalendarDragHelper } from '../common/calendar-drag-helper.provider';
 import { CalendarResizeHelper } from '../common/calendar-resize-helper.provider';
 import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-changed-event.interface';
 import { CalendarUtils } from '../common/calendar-utils.provider';
-import { validateEvents } from '../common/util';
+import { validateEvents, trackByIndex } from '../common/util';
 
 export interface WeekViewEventResize {
   originalOffset: number;
@@ -62,9 +60,9 @@ export interface CalendarWeekViewBeforeRenderEvent {
         (dayHeaderClicked)="dayHeaderClicked.emit($event)"
         (eventDropped)="eventTimesChanged.emit($event)">
       </mwl-calendar-week-view-header>
-      <div *ngFor="let eventRow of view.eventRows" #eventRowContainer class="cal-events-row">
+      <div *ngFor="let eventRow of view.eventRows; trackBy:trackByIndex" #eventRowContainer class="cal-events-row">
         <div
-          *ngFor="let weekEvent of eventRow.row"
+          *ngFor="let weekEvent of eventRow.row; trackBy:trackByEventId"
           #event
           class="cal-event-container"
           [class.cal-draggable]="weekEvent.event.draggable"
@@ -239,6 +237,17 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   dayColumnWidth: number;
 
+  /**
+   * @hidden
+   */
+  trackByIndex = trackByIndex;
+
+  /**
+   * @hidden
+   */
+  trackByEventId = (index: number, weekEvent: WeekViewEvent) =>
+    weekEvent.event.id ? weekEvent.event.id : weekEvent;
+
   /**
    * @hidden
    */