rx-angular · AdrianRomanski · May 30, 2024
diff --git a/apps/docs/docs/template/api/unpatch-directive.md b/apps/docs/docs/template/api/unpatch-directive.md
@@ -34,13 +34,22 @@ The `unpatch` directive solves this problem in a convenient way:
 > 1. Elements that should trigger navigation (with `routerLink` directly or with method bound to `(click)` or other events). Otherwise you will end up having a 'Navigation triggered outside Angular zone, did you forget to call "ngZone.run()"?' warning.
 > 2. Elements that reference a `FormControl`. Specify all events except the `blur` and `change` events. Otherwise user input is ignored, the `FormControl.valueChanges` observable will not emit and attached validations to the FormControl will not run until next change detection that affects the component in which the element is rendered.

-Included Features:
+## Included Features:

 - by default un-patch all registered listeners of the host it is applied on
 - un-patch only a specified set of registered event listeners
+- un-patch all events listeners except a specified set
 - works zone independent (it directly checks the window for patched APIs and un-patches them without the use of `runOutsideZone` which brings more performance)
 - Not interfering with any logic executed by the registered callback

+## Apply in three distinct ways:
+
+1. Unpatch all events: `<div [unpatch]>...<div>`
+2. Unpatch specified events\*: `<div [unpatch]="['mouseenter', 'mouseleave']">...<div>`
+3. Unpatch all except specified events\*: `<div [unpatch]="['!mouseenter', '!mouseleave']">...<div>`
+
+When combining negated and non-negated events i.e: `<div [unpatch]="['!mouseenter', 'mouseleave']">...<div>` all non-negated events are ignored and an error will be thrown in dev mode!
+
 ## Current list of unpatched events

 ```typescript

diff --git a/libs/template/unpatch/src/lib/tests/unpatch.directive.spec.ts b/libs/template/unpatch/src/lib/tests/unpatch.directive.spec.ts
@@ -50,11 +50,11 @@ describe(RxUnpatch.name, () => {
    const div = fixture.debugElement.query(By.css('div'));
    const addEventListener = jest.spyOn(
      div.nativeElement,
-      Zone.__symbol__('addEventListener')
+      Zone.__symbol__('addEventListener'),
    );
    const removeEventListener = jest.spyOn(
      div.nativeElement,
-      'removeEventListener'
+      'removeEventListener',
    );

    // Act
@@ -87,11 +87,11 @@ describe(RxUnpatch.name, () => {
    const div = fixture.debugElement.query(By.css('div'));
    const addEventListener = jest.spyOn(
      div.nativeElement,
-      Zone.__symbol__('addEventListener')
+      Zone.__symbol__('addEventListener'),
    );
    const removeEventListener = jest.spyOn(
      div.nativeElement,
-      'removeEventListener'
+      'removeEventListener',
    );

    // Act
@@ -115,4 +115,41 @@ describe(RxUnpatch.name, () => {
      addEventListener.mockRestore();
    }
  });
+
+  it('should re-apply all except provided negated event listeners', () => {
+    // Arrange
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.componentInstance.unpatch = ['!mouseenter'];
+    const appRef = TestBed.inject(ApplicationRef);
+    const div = fixture.debugElement.query(By.css('div'));
+    const addEventListener = jest.spyOn(
+      div.nativeElement,
+      Zone.__symbol__('addEventListener'),
+    );
+    const removeEventListener = jest.spyOn(
+      div.nativeElement,
+      'removeEventListener',
+    );
+
+    // Act
+    fixture.detectChanges();
+    const tick = jest.spyOn(appRef, 'tick');
+    div.nativeElement.dispatchEvent(new Event('mouseenter'));
+    div.nativeElement.dispatchEvent(new Event('click'));
+
+    try {
+      // Assert
+      expect(logs).toEqual([
+        [LogEvent.Mouseenter, true],
+        [LogEvent.Click, false],
+      ]);
+      // Change detection has been run once since we unpatched only `!mouseenter`.
+      expect(tick).toHaveBeenCalledTimes(1);
+      expect(addEventListener).toHaveBeenCalledTimes(1);
+      expect(removeEventListener).toHaveBeenCalledTimes(1);
+    } finally {
+      tick.mockRestore();
+      addEventListener.mockRestore();
+    }
+  });
 });
diff --git a/libs/template/unpatch/src/lib/unpatch.directive.ts b/libs/template/unpatch/src/lib/unpatch.directive.ts
@@ -43,7 +43,7 @@ export function unpatchEventListener(
  element: HTMLElement & {
    eventListeners?: (event: string) => EventListenerOrEventListenerObject[];
  },
-  event: string
+  event: string,
 ): EventListenerOrEventListenerObject[] {
  // `EventTarget` is patched only in the browser environment, thus
  // running this code on the server-side will throw an exception:
@@ -61,7 +61,7 @@ export function unpatchEventListener(

  const addEventListener = getZoneUnPatchedApi(
    element,
-    'addEventListener'
+    'addEventListener',
  ).bind(element) as typeof element.addEventListener;

  const listeners: EventListenerOrEventListenerObject[] = [];
@@ -77,6 +77,10 @@ export function unpatchEventListener(
  return listeners;
 }

+declare const ngDevMode: boolean;
+
+const NG_DEV_MODE = typeof ngDevMode === 'undefined' || !!ngDevMode;
+
 /**
 * @Directive RxUnpatch
 *
@@ -103,9 +107,19 @@ export function unpatchEventListener(
 * Included Features:
 *  - by default un-patch all registered listeners of the host it is applied on
 *  - un-patch only a specified set of registered event listeners
+ *  - un-patch all events listeners except a specified set
 *  - works zone independent (it directly checks the widow for patched APIs and un-patches them without the use of `runOutsideZone` which brings more performance)
 *  - Not interfering with any logic executed by the registered callback
 *
+ *  Apply in three distinct ways:
+ *
+ *  1. Unpatch all events: `<div [unpatch]>...<div>`
+ *  2. Unpatch specified events*: `<div [unpatch]="['mouseenter', 'mouseleave']">...<div>`
+ *  3. Unpatch all except specified events*: `<div [unpatch]="['!mouseenter', '!mouseleave']">...<div>`
+ *
+ *  When combining negated and non-negated events i.e:  `<div [unpatch]="['!mouseenter', 'mouseleave']">...<div>` all non-negated events are ignored and an error will be thrown in dev mode!
+ *
+ *
 * @usageNotes
 *
 * The `unpatch` directive can be used like shown here:
@@ -137,7 +151,21 @@ export class RxUnpatch implements OnChanges, AfterViewInit, OnDestroy {

  ngOnChanges({ events }: SimpleChanges): void {
    if (events && Array.isArray(this.events)) {
-      this.events$.next(this.events);
+      const negatedEvents = this.events
+        .filter((event) => event.startsWith('!'))
+        .map((event) => event.replace('!', ''));
+
+      const nextEvents = negatedEvents.length
+        ? zonePatchedEvents.filter(
+            (zonePatchedEvent) => !negatedEvents.includes(zonePatchedEvent),
+          )
+        : this.events;
+
+      if (NG_DEV_MODE) {
+        this.validateEvents(nextEvents, negatedEvents);
+      }
+
+      this.events$.next(nextEvents);
    }
  }

@@ -163,4 +191,23 @@ export class RxUnpatch implements OnChanges, AfterViewInit, OnDestroy {
      this.listeners.set(event, listeners);
    }
  }
+
+  private validateEvents(nextEvents: string[], negatedEvents: string[]): void {
+    // check if user has specified negated and non-negated events
+    if (negatedEvents.length && negatedEvents.length !== this.events.length) {
+      throw new Error(
+        `Invalid value [${this.events.toString()}] specified for unpatch directive! Cannot combine negated & non-negated events!`,
+      );
+    }
+
+    // check if user has specified invalid events
+    const unknownEvents = [...negatedEvents, ...nextEvents].filter(
+      (event) => !zonePatchedEvents.includes(event),
+    );
+    if (unknownEvents.length) {
+      throw new Error(
+        `Unknown events [${unknownEvents.toString()}] specified for unpatch directive!`,
+      );
+    }
+  }
 }