Fix for impure binary expression. Types and test imrovements

Author: Anatoly Ostrovsky

@types/core/scope/interface.d.ts

@@ -5,10 +5,10 @@ export interface AsyncQueueTask {
   fn: (...args: any[]) => any;
   locals: Record<string, any>;
 }
-export type ListenerFunction = (newValue: any, originalTarget: object) => void;
+export type ListenerFn = (newValue?: any, originalTarget?: object) => void;
 export interface Listener {
   originalTarget: object;
-  listenerFn: ListenerFunction;
+  listenerFn: ListenerFn;
   watchFn: CompiledExpression;
   id: number;
   scopeId: number;

@types/core/scope/scope.d.ts

@@ -128,12 +128,12 @@ export class Scope {
    * function is invoked when changes to that property are detected.
    *
    * @param {string} watchProp - An expression to be watched in the context of this model.
-   * @param {import('./interface.ts').ListenerFunction} [listenerFn] - A function to execute when changes are detected on watched context.
+   * @param {ng.ListenerFn} [listenerFn] - A function to execute when changes are detected on watched context.
    * @param {boolean} [lazy] - A flag to indicate if the listener should be invoked immediately. Defaults to false.
    */
   $watch(
     watchProp: string,
-    listenerFn?: import("./interface.ts").ListenerFunction,
+    listenerFn?: ng.ListenerFn,
     lazy?: boolean,
   ): () => void;
   $new(childInstance: any): any;

@types/namespace.d.ts

@@ -2,6 +2,10 @@ export { angular } from "./index.js";
 import { Angular as TAngular } from "./angular.js";
 import { Attributes as TAttributes } from "./core/compile/attributes.js";
 import { Scope as TScope } from "./core/scope/scope.js";
+import {
+  ListenerFn as TListenerFn,
+  Listener as TListener,
+} from "./core/scope/interface.ts";
 import { NgModule as TNgModule } from "./core/di/ng-module.js";
 import { InjectorService as TInjectorService } from "./core/di/internal-injector.js";
 import {
@@ -107,8 +111,10 @@ declare global {
     type TemplateCacheService = Map<string, string>;
     type TemplateRequestService = TTemplateRequestService;
     type ErrorHandlingConfig = TErrorHandlingConfig;
-    type WindowService = Window;
+    type ListenerFn = TListenerFn;
+    type Listener = TListener;
     type DocumentService = Document;
+    type WindowService = Window;
     type WorkerConfig = TWorkerConfig;
     type WorkerConnection = TWorkerConnection;
   }

@types/shared/utils.d.ts

@@ -488,7 +488,18 @@ export function toDebugString(obj: any): any;
  *         The resulting string key is in 'type:hashKey' format.
  */
 export function hashKey(obj: any): string;
-export function mergeClasses(a: any, b: any): any;
+/**
+ * Merges two class name values into a single space-separated string.
+ * Accepts strings, arrays of strings, or null/undefined values.
+ *
+ * @param {string | string[] | null | undefined} a - The first class name(s).
+ * @param {string | string[] | null | undefined} b - The second class name(s).
+ * @returns {string} A single string containing all class names separated by spaces.
+ */
+export function mergeClasses(
+  a: string | string[] | null | undefined,
+  b: string | string[] | null | undefined,
+): string;
 /**
  * Converts all accepted directives format into proper directive name.
  * @param {string} name Name to normalize

src/animations/animate.js

@@ -1,4 +1,10 @@
-import { isFunction, isObject, minErr, extend } from "../shared/utils.js";
+import {
+  isFunction,
+  isObject,
+  minErr,
+  extend,
+  mergeClasses,
+} from "../shared/utils.js";
 import { removeElement, animatedomInsert } from "../shared/dom.js";
 import { NG_ANIMATE_CLASSNAME } from "./shared.js";
 
@@ -14,15 +20,6 @@ import { NG_ANIMATE_CLASSNAME } from "./shared.js";
 
 const $animateMinErr = minErr("$animate");
 
-function mergeClasses(a, b) {
-  if (!a && !b) return "";
-  if (!a) return b;
-  if (!b) return a;
-  if (Array.isArray(a)) a = a.join(" ");
-  if (Array.isArray(b)) b = b.join(" ");
-  return `${a} ${b}`;
-}
-
 // if any other type of options value besides an Object value is
 // passed into the $animate.method() animation then this helper code
 // will be run which will ignore it. While this patch is not the

src/animations/animate.spec.js

@@ -1,6 +1,6 @@
 import { createElementFromHTML, dealoc } from "../shared/dom.js";
 import { Angular } from "../angular.js";
-import { isObject } from "../shared/utils.js";
+import { isObject, mergeClasses } from "../shared/utils.js";
 import { isFunction, wait } from "../shared/utils.js";
 import { createInjector } from "../core/di/injector.js";
 
@@ -496,4 +496,8 @@ describe("$animate", () => {
       });
     });
   });
+
+  describe("mergeClasses", () => {
+    expect(mergeClasses);
+  });
 });

src/animations/runner/animate-runner.js

@@ -2,7 +2,7 @@
  * @fileoverview
  * Frame-synchronized animation runner and scheduler.
  * Provides async batching of animation callbacks using requestAnimationFrame.
- * In AngularJS, this user to be implemented as `$$AnimateRunner`
+ * In AngularJS, this used to be implemented as `$$AnimateRunner`
  */
 
 /**

src/core/interpolate/interpolate.spec.js

@@ -29,6 +29,14 @@ describe("$interpolate", () => {
     expect(interp({})).toEqual("why u no }}work{{");
   });
 
+  it("evaluates binary expressions", function () {
+    let interp = $interpolate("{{a + b}}");
+    expect(interp({ a: 11, b: 22 })).toEqual("33");
+
+    interp = $interpolate("{{a + b + c}}");
+    expect(interp({ a: 11, b: 22, c: 33 })).toEqual("66");
+  });
+
   it("evaluates many expressions", function () {
     const interp = $interpolate("First {{anAttr}}, then {{anotherAttr}}!");
     expect(interp({ anAttr: "42", anotherAttr: "43" })).toEqual(

src/core/scope/interface.ts

@@ -7,11 +7,11 @@ export interface AsyncQueueTask {
   locals: Record<string, any>;
 }
 
-export type ListenerFunction = (newValue: any, originalTarget: object) => void;
+export type ListenerFn = (newValue?: any, originalTarget?: object) => void;
 
 export interface Listener {
   originalTarget: object;
-  listenerFn: ListenerFunction;
+  listenerFn: ListenerFn;
   watchFn: CompiledExpression;
   id: number; // Deregistration id
   scopeId: number; // The scope id that created the Listener

src/core/scope/scope.js

@@ -616,7 +616,7 @@ export class Scope {
    * function is invoked when changes to that property are detected.
    *
    * @param {string} watchProp - An expression to be watched in the context of this model.
-   * @param {import('./interface.ts').ListenerFunction} [listenerFn] - A function to execute when changes are detected on watched context.
+   * @param {ng.ListenerFn} [listenerFn] - A function to execute when changes are detected on watched context.
    * @param {boolean} [lazy] - A flag to indicate if the listener should be invoked immediately. Defaults to false.
    */
   $watch(watchProp, listenerFn, lazy = false) {
@@ -638,7 +638,7 @@ export class Scope {
       return () => {};
     }
 
-    /** @type {import('./interface.ts').Listener} */
+    /** @type {ng.Listener} */
     const listener = {
       originalTarget: this.$target,
       listenerFn: listenerFn,
@@ -696,13 +696,34 @@ export class Scope {
       }
       // 6
       case ASTType.BinaryExpression: {
-        let expr = get.decoratedNode.body[0].expression.toWatch[0];
-        key = expr.property ? expr.property.name : expr.name;
-        if (!key) {
-          throw new Error("Unable to determine key");
+        if (get.decoratedNode.body[0].expression.isPure) {
+          let expr = get.decoratedNode.body[0].expression.toWatch[0];
+          key = expr.property ? expr.property.name : expr.name;
+          if (!key) {
+            throw new Error("Unable to determine key");
+          }
+          listener.property.push(key);
+          break;
+        } else {
+          let keys = [];
+          get.decoratedNode.body[0].expression.toWatch.forEach((x) => {
+            const k = x.property ? x.property.name : x.name;
+            if (!k) {
+              throw new Error("Unable to determine key");
+            }
+            keys.push(k);
+          });
+          keys.forEach((key) => {
+            this.#registerKey(key, listener);
+            this.#scheduleListener([listener]);
+          });
+
+          return () => {
+            keys.forEach((key) => {
+              this.#deregisterKey(key, listener.id);
+            });
+          };
         }
-        listener.property.push(key);
-        break;
       }
       // 7
       case ASTType.UnaryExpression: {