@angular-wave/angular.ts 0.7.7 → 0.8.0

package/src/directive/options/options.spec.js

@@ -1,6 +1,6 @@
 import { createInjector } from "../../core/di/injector.js";
 import { dealoc, getController } from "../../shared/dom.js";
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import {
   isBoolean,
   hashKey,

package/src/directive/options/options.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/options/options.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(3000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/ref/href.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createInjector } from "../../core/di/injector.js";
 import { dealoc } from "../../shared/dom.js";
 import { isDefined } from "../../shared/utils.js";

package/src/directive/ref/href.test.js

@@ -3,6 +3,7 @@ import { test, expect } from "@playwright/test";
 test("unit href tests contain no errors", async ({ page }) => {
   await page.goto("src/directive/ref/href.html");
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );
@@ -11,6 +12,7 @@ test("unit href tests contain no errors", async ({ page }) => {
 test("unit ref tests contain no errors", async ({ page }) => {
   await page.goto("src/directive/ref/ref.html");
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/ref/ref.spec.js

@@ -1,5 +1,5 @@
 import { createInjector } from "../../core/di/injector.js";
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createElementFromHTML } from "../../shared/dom.js";
 
 describe("ngRef", () => {

package/src/directive/repeat/repeat.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createElementFromHTML, dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";
 
@@ -88,8 +88,7 @@ describe("ngRepeat", () => {
       "<a class='test' name='y'>b</a>" +
       "<a class='test' name='x'>c</a>";
 
-    const htmlCollection = document.getElementsByClassName("test");
-    scope.items = htmlCollection;
+    scope.items = document.getElementsByClassName("test");
     await wait();
     expect(element.querySelectorAll("li").length).toEqual(3);
     expect(element.textContent).toEqual("x;y;x;");

package/src/directive/repeat/repeat.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/repeat/repeat.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/script/script.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createInjector } from "../../core/di/injector.js";
 import { createElementFromHTML } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";

package/src/directive/script/script.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/script/script.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/select/select.js

@@ -27,7 +27,7 @@ class SelectController {
   /**
    * @type {Array<string>}
    */
-  static $inject = ["$element", "$scope"];
+  /* @ignore */ static $inject = ["$element", "$scope"];
 
   /**
    * @param {HTMLSelectElement} $element

package/src/directive/select/select.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import {
   createElementFromHTML,
   dealoc,

package/src/directive/select/select.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/select/select.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/setter/setter.js

@@ -1,4 +1,7 @@
-ngSetterDirective.$inject = ["$parse", "$log"];
+import { $injectTokens as $t } from "../../injection-tokens.js";
+
+ngSetterDirective.$inject = [$t.$parse, $t.$log];
+
 /**
  * @param {import('../../core/parse/interface.ts').ParseService} $parse
  * @param {import('../../services/log/interface.ts').LogService} $log
@@ -11,19 +14,19 @@ export function ngSetterDirective($parse, $log) {
       const modelExpression = attrs["ngSetter"];
 
       if (!modelExpression) {
-        $log.warn("ngSetter: Model expression is not provided.");
+        $log.warn("ng-setter: expression null");
         return;
       }
 
       const assignModel = $parse(modelExpression).assign;
 
       if (!assignModel) {
-        $log.warn("ngSetter: Invalid model expression.");
+        $log.warn("ng-setter: expression invalid");
         return;
       }
 
       const updateModel = (value) => {
-        assignModel(scope, value);
+        assignModel(scope, value.trim());
       };
 
       const observer = new MutationObserver((mutationsList) => {
@@ -43,16 +46,11 @@ export function ngSetterDirective($parse, $log) {
         }
       });
 
-      if (element && element) {
-        observer.observe(element, {
-          childList: true,
-          subtree: true,
-          characterData: true,
-        });
-      } else {
-        $log.warn("ngSetter: Element is not a valid DOM node.");
-        return;
-      }
+      observer.observe(element, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
 
       scope.$on("$destroy", () => observer.disconnect());
       updateModel(element.innerHTML);

package/src/directive/setter/setter.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";
 
@@ -7,7 +7,7 @@ describe("setter", () => {
 
   beforeEach(() => {
     dealoc(document.getElementById("app"));
-    window.angular = new Angular();
+    let angular = new Angular();
     angular.module("myModule", []);
     angular
       .bootstrap(document.getElementById("app"), ["myModule"])
@@ -44,34 +44,57 @@ describe("setter", () => {
     expect($rootScope.testModel).toBe("Initial content");
   });
 
+  it("should handle expression content in the element", async () => {
+    $rootScope.testModel = "";
+    $compile('<div ng-setter="testModel"> {{ 2 + 2 }} </div>')($rootScope);
+    await wait();
+
+    expect($rootScope.testModel).toBe("4");
+  });
+
+  it("should handle expression and text content in the element", async () => {
+    $rootScope.testModel = "";
+    $compile('<div ng-setter="testModel"> Res: {{ 2 + 2 }} </div>')($rootScope);
+    await wait();
+
+    expect($rootScope.testModel).toBe("Res: 4");
+  });
+
+  it("should update value if expression changes", async () => {
+    $rootScope.a = 2;
+    $compile('<div ng-setter="testModel"> {{ a + 2 }} </div>')($rootScope);
+    await wait();
+    expect($rootScope.testModel).toBe("4");
+
+    $rootScope.a = 4;
+    await wait();
+    expect($rootScope.testModel).toBe("6");
+  });
+
   it("should warn if no model expression is provided", async () => {
     spyOn($log, "warn");
 
     $compile("<div ng-setter></div>")($rootScope);
     await wait();
 
-    expect($log.warn).toHaveBeenCalledWith(
-      "ngSetter: Model expression is not provided.",
-    );
+    expect($log.warn).toHaveBeenCalledWith("ng-setter: expression null");
   });
 
-  it("should clean up the MutationObserver on scope destruction", async () => {
-    spyOn(window, "MutationObserver").and.returnValue(observerSpy);
-    const element = $compile('<div ng-setter="testModel"></div>')($rootScope);
+  it("should warn if invalid model expression is provided", async () => {
+    spyOn($log, "warn");
 
-    $rootScope.$destroy();
+    $compile("<div ng-setter='2+2'></div>")($rootScope);
     await wait();
-    expect(observerSpy.disconnect).toHaveBeenCalled();
+
+    expect($log.warn).toHaveBeenCalledWith("ng-setter: expression invalid");
   });
 
-  it("should gracefully handle invalid DOM elements", async () => {
-    spyOn(console, "warn");
+  it("should clean up the MutationObserver on scope destruction", async () => {
+    spyOn(window, "MutationObserver").and.returnValue(observerSpy);
+    $compile('<div ng-setter="testModel"></div>')($rootScope);
 
-    const element = $compile("<div></div>")($rootScope);
+    $rootScope.$destroy();
     await wait();
-
-    expect(console.warn).not.toHaveBeenCalledWith(
-      "ngSetter: Element is not a valid DOM node.",
-    );
+    expect(observerSpy.disconnect).toHaveBeenCalled();
   });
 });

package/src/directive/setter/setter.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/setter/setter.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/show-hide/show-hide.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createInjector } from "../../core/di/injector.js";
 import { dealoc, createElementFromHTML } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";

package/src/directive/show-hide/show-hide.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/show-hide/show-hide.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/style/style.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createInjector } from "../../core/di/injector.js";
 import { createElementFromHTML, dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";

package/src/directive/style/style.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/style/style.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/switch/switch.js

@@ -4,6 +4,7 @@ import { hasAnimate } from "../../shared/utils.js";
 ngSwitchDirective.$inject = ["$animate"];
 
 /**
+ * @param {*} $animate
  * @returns {import('../../interface.ts').Directive}
  */
 export function ngSwitchDirective($animate) {

package/src/directive/switch/switch.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";
 

package/src/directive/switch/switch.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/switch/switch.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/transclude/transclude.js

@@ -18,107 +18,105 @@ import { emptyElement, startingTag } from "../../shared/dom.js";
  *                                               or its value is the same as the name of the attribute then the default slot is used.
  */
 const ngTranscludeMinErr = minErr("ngTransclude");
-export const ngTranscludeDirective = [
-  "$compile",
 
-  /**
-   * @param {import("../../core/compile/compile.js").CompileFn} $compile
-   * @returns {import("../../interface.ts").Directive}
-   */
-  function ($compile) {
-    return {
-      compile: function ngTranscludeCompile(tElement) {
-        // Remove and cache any original content to act as a fallback
-        const fallbackLinkFn = $compile(tElement.childNodes);
-        emptyElement(tElement);
+ngTranscludeDirective.$inject = ["$compile"];
+/**
+ * @param {import("../../core/compile/compile.js").CompileFn} $compile
+ * @returns {import("../../interface.ts").Directive}
+ */
+export function ngTranscludeDirective($compile) {
+  return {
+    compile: function ngTranscludeCompile(tElement) {
+      // Remove and cache any original content to act as a fallback
+      const fallbackLinkFn = $compile(tElement.childNodes);
+      emptyElement(tElement);
 
-        /**
-         *
-         * @param {import("../../core/scope/scope.js").Scope} $scope
-         * @param {Element} $element
-         * @param {import("../../core/compile/attributes.js").Attributes} $attrs
-         * @param {*} _controller
-         * @param {*} $transclude
-         */
-        function ngTranscludePostLink(
-          $scope,
-          $element,
-          $attrs,
-          _controller,
-          $transclude,
-        ) {
-          if (!$transclude) {
-            throw ngTranscludeMinErr(
-              "orphan",
-              "Illegal use of ngTransclude directive in the template! " +
-                "No parent directive that requires a transclusion found. " +
-                "Element: {0}",
-              startingTag($element),
-            );
-          }
+      /**
+       *
+       * @param {import("../../core/scope/scope.js").Scope} $scope
+       * @param {Element} $element
+       * @param {import("../../core/compile/attributes.js").Attributes} $attrs
+       * @param {*} _controller
+       * @param {*} $transclude
+       */
+      function ngTranscludePostLink(
+        $scope,
+        $element,
+        $attrs,
+        _controller,
+        $transclude,
+      ) {
+        if (!$transclude) {
+          throw ngTranscludeMinErr(
+            "orphan",
+            "Illegal use of ngTransclude directive in the template! " +
+              "No parent directive that requires a transclusion found. " +
+              "Element: {0}",
+            startingTag($element),
+          );
+        }
 
-          // If the attribute is of the form: `ng-transclude="ng-transclude"` then treat it like the default
-          if ($attrs["ngTransclude"] === $attrs.$attr.ngTransclude) {
-            $attrs["ngTransclude"] = "";
-          }
-          const slotName = $attrs["ngTransclude"] || $attrs["ngTranscludeSlot"];
+        // If the attribute is of the form: `ng-transclude="ng-transclude"` then treat it like the default
+        if ($attrs["ngTransclude"] === $attrs.$attr.ngTransclude) {
+          $attrs["ngTransclude"] = "";
+        }
+        const slotName = $attrs["ngTransclude"] || $attrs["ngTranscludeSlot"];
 
-          // If the slot is required and no transclusion content is provided then this call will throw an error
-          $transclude(ngTranscludeCloneAttachFn, null, slotName);
+        // If the slot is required and no transclusion content is provided then this call will throw an error
+        $transclude(ngTranscludeCloneAttachFn, null, slotName);
 
-          // If the slot is optional and no transclusion content is provided then use the fallback content
-          if (slotName && !$transclude.isSlotFilled(slotName)) {
-            useFallbackContent();
-          }
+        // If the slot is optional and no transclusion content is provided then use the fallback content
+        if (slotName && !$transclude.isSlotFilled(slotName)) {
+          useFallbackContent();
+        }
 
-          /**
-           * @param {NodeList | Node} clone
-           * @param {import("../../core/scope/scope.js").Scope} transcludedScope
-           */
-          function ngTranscludeCloneAttachFn(clone, transcludedScope) {
-            if (notWhitespace(clone)) {
-              if (clone instanceof NodeList) {
-                Array.from(clone).forEach((el) => {
-                  $element.append(el);
-                });
-              } else {
-                $element.append(/** @type {Node} */ (clone));
-              }
+        /**
+         * @param {NodeList | Node} clone
+         * @param {import("../../core/scope/scope.js").Scope} transcludedScope
+         */
+        function ngTranscludeCloneAttachFn(clone, transcludedScope) {
+          if (notWhitespace(clone)) {
+            if (clone instanceof NodeList) {
+              Array.from(clone).forEach((el) => {
+                $element.append(el);
+              });
             } else {
-              useFallbackContent();
-              // There is nothing linked against the transcluded scope since no content was available,
-              // so it should be safe to clean up the generated scope.
-              transcludedScope.$destroy();
+              $element.append(/** @type {Node} */ (clone));
             }
+          } else {
+            useFallbackContent();
+            // There is nothing linked against the transcluded scope since no content was available,
+            // so it should be safe to clean up the generated scope.
+            transcludedScope.$destroy();
           }
+        }
 
-          function useFallbackContent() {
-            // Since this is the fallback content rather than the transcluded content,
-            // we link against the scope of this directive rather than the transcluded scope
-            fallbackLinkFn(
-              $scope,
+        function useFallbackContent() {
+          // Since this is the fallback content rather than the transcluded content,
+          // we link against the scope of this directive rather than the transcluded scope
+          fallbackLinkFn(
+            $scope,
 
-              (clone) => {
-                // @ts-ignore
-                $element.append(clone);
-              },
-            );
-          }
+            (clone) => {
+              // @ts-ignore
+              $element.append(clone);
+            },
+          );
+        }
 
-          function notWhitespace(node) {
-            if (node instanceof Array) {
-              return false;
-            } else if (
-              node.nodeType !== Node.TEXT_NODE ||
-              node.nodeValue.trim()
-            ) {
-              return true;
-            }
+        function notWhitespace(node) {
+          if (node instanceof Array) {
+            return false;
+          } else if (
+            node.nodeType !== Node.TEXT_NODE ||
+            node.nodeValue.trim()
+          ) {
+            return true;
           }
         }
+      }
 
-        return ngTranscludePostLink;
-      },
-    };
-  },
-];
+      return ngTranscludePostLink;
+    },
+  };
+}