feat(challenge33): about performance

libs/shared/directives/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/cd-flashing.directive';

libs/shared/directives/src/lib/cd-flashing.directive.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @angular-eslint/directive-selector */
+import { Directive, DoCheck, ElementRef, NgZone } from '@angular/core';
+
+@Directive({
+  selector: '[cd-flash]',
+  standalone: true,
+})
+export class CDFlashingDirective implements DoCheck {
+  constructor(private elementRef: ElementRef, private zone: NgZone) {}
+
+  ngDoCheck(): void {
+    this.cdRan();
+  }
+
+  public cdRan(): void {
+    this.zone.runOutsideAngular(() => {
+      this.elementRef.nativeElement.classList.add('!bg-orange-500');
+      setTimeout(() => {
+        this.elementRef.nativeElement.classList.remove('!bg-orange-500');
+      }, 1000);
+    });
+  }
+}

libs/shared/directives/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';