@angular-wave/angular.ts 0.3.1 → 0.4.1

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/timeout/timeout.js

@@ -8,18 +8,16 @@ export class TimeoutProvider {
     "$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
      */
-    ($rootScope, $browser, $q, $$q, $exceptionHandler) => {
+    ($rootScope, $browser, $q, $exceptionHandler) => {
       const deferreds = {};
 
       /**
@@ -38,8 +36,6 @@ export class 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 class 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/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/,
+  );
+});

package/src/directive/observe/test.html

@@ -0,0 +1,197 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS Test Runner</title>
+
+    <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
+    <script type="module" src="/src/index.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <script>
+      // Define a custom web component called <test-component>
+      class TestComponent extends HTMLElement {
+        // Called when the element is added to the DOM
+        connectedCallback() {
+          // Get the value of the 'greeting' attribute
+          const greeting = this.getAttribute("greeting") || "world";
+
+          // Set the inner HTML to display the greeting
+          this.innerHTML = `<p>Hello ${greeting}</p>`;
+        }
+
+        // Define which attributes to observe
+        static get observedAttributes() {
+          return ["greeting"];
+        }
+
+        // Called when an observed attribute changes
+        attributeChangedCallback(name, oldValue, newValue) {
+          if (name === "greeting") {
+            this.innerHTML = `<p>Hello ${newValue}</p>`;
+          }
+        }
+      }
+
+      // Register the custom element
+      customElements.define("test-component", TestComponent);
+    </script>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        var app = window.angular.module("myApp", []);
+      });
+    </script>
+    <script type="module">
+      import {
+        fluentSelect,
+        fluentOption,
+        fluentTab,
+        fluentTabPanel,
+        fluentTabs,
+        provideFluentDesignSystem,
+        fluentRadio,
+        fluentRadioGroup,
+        fluentSwitch,
+      } from "https://unpkg.com/@fluentui/web-components@2.0.0";
+      provideFluentDesignSystem().register(
+        fluentSelect(),
+        fluentTab(),
+        fluentTabPanel(),
+        fluentTabs(),
+        fluentRadio(),
+        fluentRadioGroup(),
+        fluentSwitch(),
+      );
+    </script>
+  </head>
+  <body ng-app="myApp">
+    <div id="dummy">{{ greeting }}</div>
+    <input ng-model="greeting" />
+
+    <test-component greeting="{{ greeting }}"></test-component>
+    <div>{{ greeting }}</div>
+
+    <fluent-select
+      ng-observe="current-value"
+      data-update="greeting"
+      title="Select a section"
+    >
+      <fluent-option value="Beginning">Beginning</fluent-option>
+      <fluent-option value="Middle">Middle</fluent-option>
+      <fluent-option value="End">End</fluent-option>
+    </fluent-select>
+    <br />
+
+    {{ activeid }}
+    <fluent-tabs
+      ng-observe="activeid"
+      data-update="activeid"
+      activeid="entrees"
+    >
+      <fluent-tab id="apps">Appetizers</fluent-tab>
+      <fluent-tab id="entrees">Entrees</fluent-tab>
+      <fluent-tab id="desserts">Desserts</fluent-tab>
+      <fluent-tab-panel id="appsPanel">
+        <ol>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Stuffed artichokes</fluent-anchor
+            >
+          </li>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Bruschetta</fluent-anchor
+            >
+          </li>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Oven-baked polenta</fluent-anchor
+            >
+          </li>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Salami and Fig Crostini with Ricotta</fluent-anchor
+            >
+          </li>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Rosemary-Potato Focaccia with Goat Cheese</fluent-anchor
+            >
+          </li>
+        </ol>
+      </fluent-tab-panel>
+      <fluent-tab-panel id="entreesPanel">
+        <ol>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Mushroom-Sausage Ragù</fluent-anchor
+            >
+          </li>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Tomato Bread Soup with Steamed Mussels</fluent-anchor
+            >
+          </li>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Grilled Fish with Artichoke Caponata</fluent-anchor
+            >
+          </li>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Celery Root and Mushroom Lasagna</fluent-anchor
+            >
+          </li>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Osso Buco with Citrus Gremolata</fluent-anchor
+            >
+          </li>
+        </ol>
+      </fluent-tab-panel>
+      <fluent-tab-panel id="dessertsPanel">
+        <ol>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Tiramisu</fluent-anchor
+            >
+          </li>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Spumoni</fluent-anchor
+            >
+          </li>
+          <li>
+            <fluent-anchor href="#" appearance="hypertext"
+              >Limoncello and Ice Cream with Biscotti</fluent-anchor
+            >
+          </li>
+        </ol>
+      </fluent-tab-panel>
+    </fluent-tabs>
+
+    {{ radio }}
+
+    <fluent-radio-group
+      ng-observe="value"
+      data-update="radio"
+      orientation="vertical"
+    >
+      <fluent-radio value="1">18-24</fluent-radio>
+      <fluent-radio value="2">25-33</fluent-radio>
+      <fluent-radio value="3">34-44</fluent-radio>
+      <fluent-radio value="4">45+</fluent-radio>
+    </fluent-radio-group>
+
+    {{ checked }}
+
+    <fluent-switch ng-observe="aria-checked" data-update="checked">
+      <span slot="checked-message">On</span>
+      <span slot="unchecked-message">Off</span>
+      <label for="cap-switch">Captions:</label>
+    </fluent-switch>
+  </body>
+</html>

package/src/public.js

@@ -75,7 +75,7 @@ import { LocationProvider } from "./core/location/location";
 import { LogProvider } from "./services/log";
 import { ParseProvider } from "./core/parser/parse";
 import { RootScopeProvider } from "./core/scope/scope";
-import { $QProvider, $$QProvider } from "./core/q/q";
+import { $QProvider } from "./core/q/q";
 import { SceProvider, SceDelegateProvider } from "./core/sce/sce";
 import { TaskTrackerFactoryProvider } from "./core/task-tracker-factory";
 import { TemplateRequestProvider } from "./services/template-request";
@@ -116,8 +116,8 @@ import { UrlConfigProvider } from "./router/url/url-config";
 import { UIRouterGlobals } from "./router/globals";
 import { ViewService } from "./router/view/view";
 import { TransitionProvider } from "./router/transition/transition-service";
-import { StateService } from "./router/state/state-service";
-import { $ViewScrollProvider } from "./router/view-scroll";
+import { StateProvider } from "./router/state/state-service";
+import { ViewScrollProvider } from "./router/view-scroll";
 import { TemplateFactoryProvider } from "./router/template-factory";
 import { UrlService } from "./router/url/url-service";
 import { StateRegistryProvider } from "./router/state/state-registry";
@@ -128,6 +128,7 @@ import {
   $StateRefDynamicDirective,
 } from "./router/directives/state-directives";
 import { $ViewDirectiveFill, ngView } from "./router/directives/view-directive";
+import { ngObserveDirective } from "./directive/observe/observe";
 
 /**
  * @type {string} `version` from `package.json`, injected by Rollup plugin
@@ -187,6 +188,7 @@ export function publishExternalAPI(angular) {
               ngSwitch: ngSwitchDirective,
               ngSwitchWhen: ngSwitchWhenDirective,
               ngSwitchDefault: ngSwitchDefaultDirective,
+              ngObserve: ngObserveDirective,
               ngOptions: ngOptionsDirective,
               ngTransclude: ngTranscludeDirective,
               ngModel: ngModelDirective,
@@ -259,7 +261,6 @@ export function publishExternalAPI(angular) {
             $rootScope: RootScopeProvider,
             $routerGlobals: UIRouterGlobals,
             $q: $QProvider,
-            $$q: $$QProvider,
             $sce: SceProvider,
             $sceDelegate: SceDelegateProvider,
             $$taskTrackerFactory: TaskTrackerFactoryProvider,
@@ -269,8 +270,8 @@ export function publishExternalAPI(angular) {
             $urlConfig: UrlConfigProvider,
             $view: ViewService,
             $transitions: TransitionProvider,
-            $state: StateService,
-            $ngViewScroll: $ViewScrollProvider,
+            $state: StateProvider,
+            $ngViewScroll: ViewScrollProvider,
             $templateFactory: TemplateFactoryProvider,
             $urlService: UrlService,
             $stateRegistry: StateRegistryProvider,

package/src/router/state/state-service.js

@@ -27,7 +27,7 @@ const err = minErr("$stateProvider");
  *
  * This API is located at `router.stateService` ([[UIRouter.stateService]])
  */
-export class StateService {
+export class StateProvider {
   /**
    * The latest successful state parameters
    *
@@ -73,11 +73,11 @@ export class StateService {
       }
     };
     const getters = ["current", "$current", "params", "transition"];
-    const boundFns = Object.keys(StateService.prototype).filter(
+    const boundFns = Object.keys(StateProvider.prototype).filter(
       (x) => !getters.includes(x),
     );
     createProxyFunctions(
-      val(StateService.prototype),
+      val(StateProvider.prototype),
       this,
       val(this),
       boundFns,