@angular-wave/angular.ts 0.3.0 → 0.4.0

package/src/core/scope/scope.js

@@ -76,11 +76,6 @@ let $browser;
 /**@type {import('../exception-handler').ErrorHandler} */
 let $exceptionHandler;
 
-/**
- * @type {Scope}
- */
-let rootScope;
-
 /**
  * Provider responsible for instantiating the initial scope, aka - root scope.
  * Every application has a single root {@link ng.$rootScope.Scope scope}.
@@ -92,9 +87,9 @@ let rootScope;
  * The provider also injects runtime services to make them available to all scopes.
  *
  */
-export class $RootScopeProvider {
+export class RootScopeProvider {
   constructor() {
-    rootScope = new Scope();
+    this.rootScope = new Scope(true);
   }
 
   $get = [
@@ -111,7 +106,7 @@ export class $RootScopeProvider {
       $exceptionHandler = exceptionHandler;
       $parse = parse;
       $browser = browser;
-      return rootScope;
+      return this.rootScope;
     },
   ];
 }
@@ -142,7 +137,15 @@ export class $RootScopeProvider {
  */
 
 export class Scope {
-  constructor() {
+  /**
+   * @param {boolean} [root=false] - Indicates if this scope is the root scope.
+   */
+  constructor(root = false) {
+    /**
+     * @type {boolean}
+     */
+    this.isRoot = root;
+
     /**
      * @type {number} Unique scope ID (monotonically increasing) useful for debugging.
      */
@@ -194,13 +197,12 @@ export class Scope {
     /** @type {boolean} */
     this.$$destroyed = false;
 
-    // TODO use maps
     /** @type {boolean} */
     this.$$suspended = false;
 
     // TODO use maps
-    /** @type {object} */
-    this.$$listeners = {};
+    /** @type {Map<String, Function[]>} */
+    this.$$listeners = new Map();
 
     /** @type {object} */
     this.$$listenerCount = {};
@@ -240,19 +242,18 @@ export class Scope {
    *
    */
   $new(isolate, parent) {
-    /** @type {Scope} */
-    let child;
+    let child = isolate ? new Scope() : Object.create(this);
+
     if (isolate) {
-      child = new Scope();
-      child.$root = rootScope;
+      child.$root = this.isRoot ? this : this.$root;
     } else {
-      child = Object.create(this);
+      // Initialize properties for a non-isolated child scope
       child.$id = nextUid();
       child.$$watchers = [];
       child.$$nextSibling = null;
       child.$$childHead = null;
       child.$$childTail = null;
-      child.$$listeners = {};
+      child.$$listeners = new Map();
       child.$$listenerCount = {};
       child.$$watchersCount = 0;
       child.$$ChildScope = null;
@@ -261,6 +262,7 @@ export class Scope {
 
     child.$parent = parent || this;
     child.$$prevSibling = child.$parent.$$childTail;
+
     if (child.$parent.$$childHead) {
       child.$parent.$$childTail.$$nextSibling = child;
       child.$parent.$$childTail = child;
@@ -269,20 +271,13 @@ export class Scope {
       child.$parent.$$childTail = child;
     }
 
-    // When the new scope is not isolated or we inherit from `this`, and
-    // the parent scope is destroyed, the property `$$destroyed` is inherited
-    // prototypically. In all other cases, this property needs to be set
-    // when the parent scope is destroyed.
-    // The listener needs to be added after the parent is set
+    // Add a destroy listener if isolated or the parent differs from `this`
     if (isolate || parent !== this) {
-      child.$on(
-        "$destroy",
-        /** @param {any} $event */ //angular.IAngularEvent
-        ($event) => {
-          $event.currentScope.$$destroyed = true;
-        },
-      );
+      child.$on("$destroy", ($event) => {
+        $event.currentScope.$$destroyed = true;
+      });
     }
+
     return child;
   }
 
@@ -732,7 +727,6 @@ export class Scope {
  *
  */
   $digest() {
-    let watch;
     let value;
     let last;
     let fn;
@@ -741,10 +735,9 @@ export class Scope {
     let dirty;
     let ttl = TTL;
     let next;
-    /**
-     * @type {Scope}
-     */
+    /** @type {Scope} */
     let current;
+    /** @type {Scope} */
     const target = $$asyncQueue.length ? this.$root : this;
     const watchLog = [];
     let logIdx;
@@ -755,7 +748,7 @@ export class Scope {
     // TODO Implement browser
     $browser.$$checkUrlChange();
 
-    if (this === this.$root && applyAsyncId !== null) {
+    if (this.isRoot && applyAsyncId !== null) {
       // If this is the root scope, and $applyAsync has scheduled a deferred $apply(), then
       // cancel the scheduled $apply and flush the queue of expressions to be evaluated.
       $browser.cancel(applyAsyncId);
@@ -795,7 +788,7 @@ export class Scope {
           current.$$digestWatchIndex = watchers.length;
           while (current.$$digestWatchIndex--) {
             try {
-              watch = watchers[current.$$digestWatchIndex];
+              const watch = watchers[current.$$digestWatchIndex];
               // Most common watches are on primitives, in which case we can short
               // circuit it with === operator, only when === fails do we use .equals
               if (watch) {
@@ -1038,7 +1031,7 @@ export class Scope {
         function () {
           return () => {};
         };
-    this.$$listeners = {};
+    this.$$listeners.clear();
 
     // Disconnect the next sibling to prevent `cleanUpScope` destroying those too
     this.$$nextSibling = null;
@@ -1251,9 +1244,10 @@ export class Scope {
    * @returns {function()} Returns a deregistration function for this listener.
    */
   $on(name, listener) {
-    let namedListeners = this.$$listeners[name];
+    let namedListeners = this.$$listeners.get(name);
     if (!namedListeners) {
-      this.$$listeners[name] = namedListeners = [];
+      namedListeners = [];
+      this.$$listeners.set(name, namedListeners);
     }
     namedListeners.push(listener);
 
@@ -1342,7 +1336,7 @@ export class Scope {
     let length;
 
     do {
-      namedListeners = scope.$$listeners[name] || empty;
+      namedListeners = scope.$$listeners.get(name) || empty;
       event.currentScope = scope;
       for (i = 0, length = namedListeners.length; i < length; i++) {
         // if listeners were deregistered, defragment the array
@@ -1414,7 +1408,7 @@ export class Scope {
     // down while you can, then up and next sibling or up and next sibling until back at root
     while ((current = next)) {
       event.currentScope = current;
-      listeners = current.$$listeners[name] || [];
+      listeners = current.$$listeners.get(name) || [];
       for (i = 0, length = listeners.length; i < length; i++) {
         // if listeners were deregistered, defragment the array
         if (!listeners[i]) {

package/src/core/scope/scope.spec.js

@@ -1,4 +1,4 @@
-import { $$asyncQueue } from "./scope";
+import { $$asyncQueue, Scope } from "./scope";
 import { extend, sliceArgs } from "../../shared/utils";
 import { Angular } from "../../loader";
 import { createInjector } from "../di/injector";
@@ -8,6 +8,7 @@ describe("Scope", function () {
   let $parse;
   let $browser;
   let logs;
+  let scope;
 
   beforeEach(() => {
     logs = [];
@@ -27,6 +28,21 @@ describe("Scope", function () {
     $browser = injector.get("$browser");
 
     $rootScope = injector.get("$rootScope");
+    scope = $rootScope;
+  });
+
+  describe("class", () => {
+    it("can be constructed as a class", () => {
+      const scope = new Scope();
+      expect(scope).toBeDefined();
+      expect(scope.isRoot).toBeFalse();
+    });
+
+    it("can be constructed as a root scope", () => {
+      const scope = new Scope(true);
+      expect(scope).toBeDefined();
+      expect(scope.isRoot).toBeTrue();
+    });
   });
 
   describe("inheritance", () => {
@@ -49,7 +65,7 @@ describe("Scope", function () {
       const child = $rootScope.$new();
       child.aValue = [1, 2, 3];
 
-      expect(parent.aValue).toBeUndefined();
+      expect($rootScope.aValue).toBeUndefined();
     });
 
     it("inherits the parents properties whenever they are defined", () => {
@@ -91,6 +107,7 @@ describe("Scope", function () {
 
       expect(child.aValue).toEqual([1, 2, 3, 4]);
       expect($rootScope.aValue).toEqual([1, 2, 3, 4]);
+      expect(child.aValue).toEqual($rootScope.aValue);
     });
   });
 
@@ -122,6 +139,7 @@ describe("Scope", function () {
       $rootScope.a = 123;
       expect(isolated.a).toBeUndefined();
       expect(trans.a).toEqual(123);
+      expect(trans.$root).toBe($rootScope);
       expect(trans.$parent).toBe(isolated);
     });
   });
@@ -171,13 +189,53 @@ describe("Scope", function () {
       expect($rootScope.$eval("this")).toEqual($rootScope);
     });
 
-    it("should be able to access a constiable named 'this'", () => {
+    it("should be able to access a constant variable named 'this'", () => {
       $rootScope.this = 42;
       expect($rootScope.$eval("this['this']")).toBe(42);
     });
   });
 
   describe("$watch/$digest", () => {
+    it("calls the listener function of a watch on first $digest", function () {
+      var watchFn = function () {
+        return "wat";
+      };
+      var listenerFn = jasmine.createSpy();
+      $rootScope.$watch(watchFn, listenerFn);
+      $rootScope.$digest();
+      expect(listenerFn).toHaveBeenCalled();
+    });
+
+    it("calls the watch function with the scope as the argument", function () {
+      var watchFn = jasmine.createSpy();
+      var listenerFn = function () {};
+      $rootScope.$watch(watchFn, listenerFn);
+      $rootScope.$digest();
+      expect(watchFn).toHaveBeenCalledWith($rootScope);
+    });
+
+    it("calls the listener function when the watched value changes", function () {
+      scope.someValue = "a";
+      scope.counter = 0;
+      scope.$watch(
+        function (scope) {
+          return scope.someValue;
+        },
+        function (newValue, oldValue, scope) {
+          scope.counter++;
+        },
+      );
+      expect(scope.counter).toBe(0);
+      scope.$digest();
+      expect(scope.counter).toBe(1);
+      scope.$digest();
+      expect(scope.counter).toBe(1);
+      scope.someValue = "b";
+      expect(scope.counter).toBe(1);
+      scope.$digest();
+      expect(scope.counter).toBe(2);
+    });
+
     it("should watch and fire on simple property change", () => {
       const spy = jasmine.createSpy();
       $rootScope.$watch("name", spy);
@@ -2870,13 +2928,13 @@ describe("Scope", function () {
           const remove1 = $rootScope.$on("abc", () => {});
           $rootScope.$on("abc", () => {});
 
-          expect($rootScope.$$listeners.abc.length).toBe(2);
-          expect(0 in $rootScope.$$listeners.abc).toBe(true);
+          expect($rootScope.$$listeners.get("abc").length).toBe(2);
+          expect(0 in $rootScope.$$listeners.get("abc")).toBe(true);
 
           remove1();
 
-          expect($rootScope.$$listeners.abc.length).toBe(2);
-          expect(0 in $rootScope.$$listeners.abc).toBe(false);
+          expect($rootScope.$$listeners.get("abc").length).toBe(2);
+          expect(0 in $rootScope.$$listeners.get("abc")).toBe(false);
         });
 
         it("should call next listener after removing the current listener via its own handler", () => {
@@ -3097,14 +3155,14 @@ describe("Scope", function () {
 
         spy1.and.callFake(remove1);
 
-        expect(child.$$listeners.evt.length).toBe(3);
+        expect(child.$$listeners.get("evt").length).toBe(3);
 
         // should call all listeners and remove 1st
         child.$emit("evt");
         expect(spy1).toHaveBeenCalled();
         expect(spy2).toHaveBeenCalled();
         expect(spy3).toHaveBeenCalled();
-        expect(child.$$listeners.evt.length).toBe(3); // cleanup will happen on next $emit
+        expect(child.$$listeners.get("evt").length).toBe(3); // cleanup will happen on next $emit
 
         spy1.calls.reset();
         spy2.calls.reset();
@@ -3116,7 +3174,7 @@ describe("Scope", function () {
         expect(spy1).not.toHaveBeenCalled();
         expect(spy2).toHaveBeenCalled();
         expect(spy3).not.toHaveBeenCalled();
-        expect(child.$$listeners.evt.length).toBe(1);
+        expect(child.$$listeners.get("evt").length).toBe(1);
       });
 
       it("should allow removing event listener inside a listener on $broadcast", () => {
@@ -3130,14 +3188,14 @@ describe("Scope", function () {
 
         spy1.and.callFake(remove1);
 
-        expect(child.$$listeners.evt.length).toBe(3);
+        expect(child.$$listeners.get("evt").length).toBe(3);
 
         // should call all listeners and remove 1st
         child.$broadcast("evt");
         expect(spy1).toHaveBeenCalled();
         expect(spy2).toHaveBeenCalled();
         expect(spy3).toHaveBeenCalled();
-        expect(child.$$listeners.evt.length).toBe(3); // cleanup will happen on next $broadcast
+        expect(child.$$listeners.get("evt").length).toBe(3); // cleanup will happen on next $broadcast
 
         spy1.calls.reset();
         spy2.calls.reset();
@@ -3149,7 +3207,7 @@ describe("Scope", function () {
         expect(spy1).not.toHaveBeenCalled();
         expect(spy2).toHaveBeenCalled();
         expect(spy3).not.toHaveBeenCalled();
-        expect(child.$$listeners.evt.length).toBe(1);
+        expect(child.$$listeners.get("evt").length).toBe(1);
       });
 
       describe("event object", () => {

package/src/core/task-tracker-factory.js

@@ -1,4 +1,4 @@
-export class $$TaskTrackerFactoryProvider {
+export class TaskTrackerFactoryProvider {
   $get = [
     "$log",
     /**

package/src/core/timeout/timeout.js

@@ -3,23 +3,21 @@ import { isDefined, minErr, sliceArgs } from "../../shared/utils";
 
 const $timeoutMinErr = minErr("$timeout");
 
-export function $TimeoutProvider() {
-  this.$get = [
+export class TimeoutProvider {
+  $get = [
     "$rootScope",
     "$browser",
     "$q",
-    "$$q",
     "$exceptionHandler",
     /**
      *
      * @param {import('../scope/scope').Scope} $rootScope
      * @param {import('../../services/browser').Browser} $browser
      * @param {*} $q
-     * @param {*} $$q
      * @param {import('../exception-handler').ErrorHandler} $exceptionHandler
      * @returns
      */
-    function ($rootScope, $browser, $q, $$q, $exceptionHandler) {
+    ($rootScope, $browser, $q, $exceptionHandler) => {
       const deferreds = {};
 
       /**
@@ -38,8 +36,6 @@ export function $TimeoutProvider() {
        *
        * @param {function()=} fn A function, whose execution should be delayed.
        * @param {number=} [delay=0] Delay in milliseconds.
-       * @param {boolean=} [invokeApply=true] If set to `false` skips model dirty checking, otherwise
-       *   will invoke `fn` within the {@link ng.$rootScope.Scope#$apply $apply} block.
        * @returns {import("../q/q").QPromise<any>} Promise that will be resolved when the timeout is reached. The promise
        *   will be resolved with the return value of the `fn` function.
        *
@@ -47,7 +43,7 @@ export function $TimeoutProvider() {
       function timeout(fn, delay, invokeApply = true) {
         const args = sliceArgs(arguments, 3);
         const skipApply = isDefined(invokeApply) && !invokeApply;
-        const deferred = (skipApply ? $$q : $q).defer();
+        const deferred = $q.defer();
         const { promise } = deferred;
         let timeoutId;
 

package/src/directive/attrs/attrs.js

@@ -11,7 +11,7 @@ Object.entries(BOOLEAN_ATTR).forEach(([attrName, propName]) => {
   // binding to multiple is not supported
   if (propName === "multiple") return;
 
-  function defaultLinkFn(scope, element, attr) {
+  function defaultLinkFn(scope, _element, attr) {
     scope.$watch(attr[normalized], (value) => {
       attr.$set(attrName, !!value);
     });

package/src/directive/if/if.js

@@ -18,10 +18,10 @@ export function ngIfDirective($animate) {
     restrict: "A",
     /**
      *
-     * @param {*} $scope
-     * @param {*} $element
-     * @param {*} $attr
-     * @param {*} _ctrl
+     * @param {import("../../core/scope/scope").Scope} $scope
+     * @param {import("../../shared/jqlite/jqlite").JQLite} $element
+     * @param {import("../../core/compile/attributes").Attributes} $attr
+     * @param {Object} _ctrl
      * @param {*} $transclude
      */
     link($scope, $element, $attr, _ctrl, $transclude) {
@@ -32,7 +32,7 @@ export function ngIfDirective($animate) {
       let childScope;
       /** @type {import("../../shared/jqlite/jqlite").JQLite} */
       let previousElements;
-      $scope.$watch($attr.ngIf, (value) => {
+      $scope.$watch($attr["ngIf"], (value) => {
         if (value) {
           if (!childScope) {
             $transclude((clone, newScope) => {

package/src/directive/input/input.spec.js

@@ -1,5 +1,4 @@
 import { Angular } from "../../loader";
-import { createInjector } from "../../core/di/injector";
 import { dealoc, JQLite } from "../../shared/jqlite/jqlite";
 import { EMAIL_REGEXP, ISO_DATE_REGEXP, URL_REGEXP } from "./input";
 import { forEach } from "../../shared/utils";

package/src/directive/observe/observe.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS Test Runner</title>
+
+    <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
+    <link rel="stylesheet" href="/jasmine/jasmine-5.1.2/jasmine.css" />
+    <script src="/jasmine/jasmine-5.1.2/jasmine.js"></script>
+    <script src="/jasmine/jasmine-5.1.2/jasmine-html.js"></script>
+    <script src="/jasmine/jasmine-5.1.2/boot0.js"></script>
+    <script src="/jasmine/jasmine-5.1.2/boot1.js"></script>
+    <script type="module" src="/src/directive/observe/observe.spec.js"></script>
+  </head>
+  <body>
+    <div id="dummy"></div>
+  </body>
+</html>

package/src/directive/observe/observe.js

@@ -0,0 +1,37 @@
+/**
+ * @returns {import("../../types").Directive}
+ */
+export function ngObserveDirective() {
+  return {
+    restrict: "A",
+    link: (scope, element, attrs) => {
+      const targetElement = element[0];
+      const prop = targetElement.dataset["update"];
+      const source = attrs["ngObserve"];
+
+      if (!scope[prop]) {
+        scope[prop] = targetElement.getAttribute(source);
+      }
+
+      const observer = new MutationObserver((mutations) => {
+        const mutation = mutations[0];
+        const newValue = /** @type {HTMLElement} */ (
+          mutation.target
+        ).getAttribute(source);
+        if (scope[prop] !== newValue) {
+          scope[prop] = newValue;
+          scope.$digest();
+        }
+      });
+
+      observer.observe(targetElement, {
+        attributes: true,
+        attributeFilter: [source],
+      });
+
+      scope.$on("$destroy", () => {
+        observer.disconnect();
+      });
+    },
+  };
+}

package/src/directive/observe/observe.spec.js

@@ -0,0 +1,92 @@
+import { Angular } from "../../loader";
+import { JQLite } from "../../shared/jqlite/jqlite";
+
+describe("observe", () => {
+  let $compile, $scope, $rootScope, element, observerSpy;
+
+  beforeEach(() => {
+    window.angular = new Angular();
+    angular.module("myModule", ["ng"]);
+    angular
+      .bootstrap(document.getElementById("dummy"), ["myModule"])
+      .invoke((_$compile_, _$rootScope_) => {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $scope = $rootScope.$new();
+      });
+
+    observerSpy = jasmine.createSpyObj("MutationObserver", [
+      "observe",
+      "disconnect",
+    ]);
+    spyOn(window, "MutationObserver").and.returnValue(observerSpy); // Replace with a spy
+  });
+
+  function createDirective(attributeValue, updateProp) {
+    const template = `<div ng-observe="${attributeValue}" data-update="${updateProp}"></div>`;
+    element = $compile(template)($scope);
+    $scope.$digest();
+  }
+
+  it("should set the scope property to the attribute value before any changes", () => {
+    const scope = $rootScope.$new();
+    const element = JQLite(
+      '<div data-update="testProp" ng-observe="sourceAttr"></div>',
+    );
+    element.attr("sourceAttr", "initialValue");
+    $compile(element)(scope);
+
+    expect(scope.testProp).toBeDefined();
+    expect(scope.testProp).toEqual("initialValue");
+  });
+
+  it("should observe attribute changes and update the scope property", () => {
+    $scope.myProp = "";
+    createDirective("test-attribute", "myProp");
+    spyOn($scope, "$digest").and.callThrough();
+
+    const mutationObserverCallback =
+      MutationObserver.calls.mostRecent().args[0];
+    const mutationRecord = {
+      target: element[0],
+      attributeName: "test-attribute",
+    };
+
+    element.attr("test-attribute", "newValue");
+    element[0].setAttribute("test-attribute", "newValue");
+
+    mutationObserverCallback([mutationRecord]);
+
+    expect($scope.myProp).toBe("newValue");
+    expect($scope.$digest).toHaveBeenCalled();
+  });
+
+  it("should not trigger digest cycle if the attribute value is unchanged", () => {
+    $scope.myProp = "existingValue";
+    createDirective("test-attribute", "myProp");
+
+    spyOn($scope, "$digest").and.callThrough();
+
+    const mutationObserverCallback =
+      MutationObserver.calls.mostRecent().args[0];
+    const mutationRecord = {
+      target: element[0],
+      attributeName: "test-attribute",
+    };
+
+    element.attr("test-attribute", "existingValue");
+    element[0].setAttribute("test-attribute", "existingValue");
+
+    mutationObserverCallback([mutationRecord]);
+
+    expect($scope.$digest).not.toHaveBeenCalled();
+  });
+
+  it("should disconnect the observer on scope destruction", () => {
+    createDirective("test-attribute", "myProp");
+
+    $scope.$destroy();
+
+    expect(observerSpy.disconnect).toHaveBeenCalled();
+  });
+});

package/src/directive/observe/observe.test.js

@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("unit observer tests contain no errors", async ({ page }) => {
+  await page.goto("src/directive/observe/observe.html");
+  await page.content();
+  await expect(page.locator(".jasmine-overall-result")).toHaveText(
+    /0 failures/,
+  );
+});