In one of my apps, we previously used a .silent modifier that unwrapped the actual class method to invoke using (__ngUnwrap__)(Function):

unwrap.ts

const originalListenerToken = '__ngUnwrap__';

/**
 * The `wrappedWithPreventDefaultListener` is a function returned by `decoratePreventDefault`.
 * The `decoratePreventDefault` looks as follows:
 * ```js
 * function decoratePreventDefault(eventHandler) {
 *   return event => {
 *     if (event === '__ngUnwrap__') {
 *       return eventHandler;
 *     }
 *
 *     const allowDefaultBehavior = eventHandler(event);
 *     if (allowDefaultBehavior === false) {
 *       event.preventDefault();
 *       event.returnValue = false;
 *     }
 *
 *     return undefined;
 *   };
 * }
 * ```
 *
 * So if we call that function with `__ngUnwrap__` parameter it'll return the function again.
 * The `eventHandler` is a function returned by `wrapListener`, its implementation looks as follows:
 * ```js
 * function wrapListener(tNode, lView, context, listenerFn, wrapWithPreventDefault) {
 *   return function wrapListenerIn_markDirtyAndPreventDefault(event) {
 *     if (event === Function) {
 *       return listenerFn;
 *     }
 *
 *     // `32` is `ManualOnPush`.
 *     if ((lView[FLAGS] & 32) === 0) {
 *       markViewDirty(startView);
 *     }
 *
 *     // ...
 *   }
 * }
 * ```
 * So if we pass in the `Function` constructor as an argument it'll return the original listener function.
 */
export function unwrapOriginalListener(
  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
  wrappedWithPreventDefaultListener: Function
): EventListener {
  // Ivy uses '__ngUnwrap__' as a special token that allows us to unwrap the function
  // so that it can be invoked programmatically by `DebugNode.triggerEventHandler`. The debug_node
  // can inspect the listener toString contents for the existence of this special token. Because
  // the token is a string literal, it is ensured to not be modified by compiled code.
  const wrappedWithMarkDirtyAndPreventDefaultListener =
    wrappedWithPreventDefaultListener(originalListenerToken);

  // Ivy uses `Function` as a special token that allows us to unwrap the function
  // so that it can be invoked programmatically by `DebugNode.triggerEventHandler`.
  const originalListener =
    wrappedWithMarkDirtyAndPreventDefaultListener(Function);

  return originalListener;
}

But they have also removed that option to get the actual listener, so we now need to use a patch for backward compatibility:

I ain't really happy with that.

Uh oh!

RxUnpatch directive - doesn't do anything on zoneless #1877

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions