@angular-wave/angular.ts 0.7.5 → 0.7.8

package/src/directive/http/get.spec.js

@@ -1,14 +1,32 @@
 import { Angular } from "../../loader.js";
 import { browserTrigger, wait } from "../../shared/test-utils.js";
+import { dealoc } from "../../shared/dom.js";
 
-describe("ngGet", () => {
+describe("ng-get", () => {
   let $compile, $rootScope, $log, el;
 
   beforeEach(() => {
     el = document.getElementById("app");
+    dealoc(el);
     el.innerHTML = "";
     let angular = new Angular();
-    angular.module("default", []);
+    angular.module("default", []).config([
+      "$stateProvider",
+      "$locationProvider",
+      ($stateProvider) => {
+        $stateProvider
+          .state({
+            name: "success",
+            url: "/success",
+            template: `success`,
+          })
+          .state({
+            name: "error",
+            url: "/error",
+            template: `error`,
+          });
+      },
+    ]);
     angular
       .bootstrap(el, ["default"])
       .invoke((_$compile_, _$rootScope_, _$log_) => {
@@ -37,6 +55,16 @@ describe("ngGet", () => {
     expect(el.firstChild.innerHTML).toBe("<div>Hello</div>");
   });
 
+  it("should compile innerHTML", async () => {
+    const scope = $rootScope.$new();
+    el.innerHTML = '<button ng-get="/mock/divexpr">Load</button>';
+    scope.expr = "World";
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.innerText).toBe("World");
+  });
+
   it("should replace innerHTML on error", async () => {
     const scope = $rootScope.$new();
     el.innerHTML = '<button ng-get="/mock/422">Load</button>';
@@ -55,7 +83,7 @@ describe("ngGet", () => {
     expect(el.innerText).toBe("Load");
   });
 
-  it("should replace innerHTML on statuc error without a body", async () => {
+  it("should replace innerHTML on status error without a body", async () => {
     const scope = $rootScope.$new();
     el.innerHTML = '<button ng-get="/mock/401">Load</button>';
     $compile(el)(scope);
@@ -64,6 +92,111 @@ describe("ngGet", () => {
     expect(el.innerText).toBe("Unauthorized");
   });
 
+  describe("data-trigger", () => {
+    it("should not trigger request on click if element has trigger attribute", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-trigger="mouseover">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+    });
+
+    it("should trigger request on new event name if element has trigger attribute", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-trigger="mouseover">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "mouseover");
+      await wait(100);
+      expect(el.innerText).toBe("Hello");
+    });
+  });
+
+  describe("data-latch", () => {
+    it("should trigger request on latch change", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-latch="{{ latch }}">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+      scope.latch = true;
+      await wait(100);
+      expect(el.innerText).not.toBe("Load");
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+
+      scope.latch = !scope.latch;
+      await wait(100);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBeGreaterThan(firstRes);
+
+      scope.latch = !scope.latch;
+      await wait(100);
+      const thirdRes = parseInt(el.innerText);
+      expect(thirdRes).toBeGreaterThan(secondRes);
+    });
+
+    it("should still work with events with latch change", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-latch="{{ latch }}">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+      scope.latch = true;
+      await wait(100);
+      expect(el.innerText).not.toBe("Load");
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBeGreaterThan(firstRes);
+    });
+
+    it("should still work with custom events with latch change", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-latch="{{ latch }}" data-trigger="mouseover">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+      scope.latch = true;
+      await wait(100);
+      expect(el.innerText).not.toBe("Load");
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+
+      browserTrigger(el.querySelector("button"), "mouseover");
+      await wait(100);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBeGreaterThan(firstRes);
+    });
+
+    it("should still work with ng-event directives with latch change", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-latch="{{ latch }}" ng-mouseover="latch = !latch">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+      browserTrigger(el.querySelector("button"), "mouseover");
+      await wait(100);
+      expect(el.innerText).not.toBe("Load");
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+
+      browserTrigger(el.querySelector("button"), "mouseover");
+      await wait(100);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBeGreaterThan(firstRes);
+    });
+  });
+
   describe("data-swap", () => {
     it("should not change anything if swap is 'none'", async () => {
       const scope = $rootScope.$new();
@@ -208,4 +341,148 @@ describe("ngGet", () => {
       expect(el.lastChild.textContent).toBe("Hello");
     });
   });
+
+  describe("data-delay", () => {
+    it("should accept delay as a data attribute", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-delay="1000">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+
+      await wait(1000);
+      expect(el.innerText).toBe("Hello");
+    });
+  });
+
+  describe("data-throttle", () => {
+    it("should accept throttle as a data attribute", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-throttle="1000">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBe(firstRes);
+
+      await wait(900);
+      // should release the throttle
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const thirdRes = parseInt(el.innerText);
+      expect(thirdRes).toBeGreaterThan(firstRes);
+    });
+  });
+
+  describe("data-interval", () => {
+    it("should accept delay as a data attribute and should stop on $destroy", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-interval="100">Load</button>';
+      $compile(el)(scope);
+
+      await wait(200);
+      await wait(200);
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+      await wait(200);
+      await wait(200);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBeGreaterThan(firstRes);
+      await wait(200);
+      await wait(200);
+      const thirdRes = parseInt(el.innerText);
+      expect(thirdRes).toBeGreaterThan(secondRes);
+
+      scope.$broadcast("$destroy");
+
+      await wait(200);
+      await wait(200);
+      const finalRes = parseInt(el.innerText);
+
+      await wait(1000);
+      await wait(200);
+      expect(parseInt(el.innerText)).toEqual(finalRes);
+    });
+  });
+
+  describe("data-loading", () => {
+    it("should update loading data attribute", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML = '<button ng-get="/mock/now" data-loading>Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      expect(el.querySelector("button").dataset.loading).toEqual("true");
+      await wait(200);
+      expect(el.querySelector("button").dataset.loading).toEqual("false");
+    });
+  });
+
+  describe("data-loading-class", () => {
+    it("should update class from data-loading-class attribute", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-loading-class="red">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      expect(el.querySelector("button").classList.contains("red")).toBeTrue();
+      await wait(200);
+      expect(el.querySelector("button").classList.contains("red")).toBeFalse();
+    });
+  });
+
+  describe("data-success", () => {
+    it("should evaluate expression passing result", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-success="res = $res">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(200);
+      expect(scope.res).toEqual("Hello");
+    });
+  });
+
+  describe("data-state-success", () => {
+    it("should call stateService with success state", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-state-success="success">Load</button><ng-view id="view"></ng-view>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(200);
+      expect(document.getElementById("view").innerHTML).toEqual("success");
+    });
+  });
+
+  describe("data-state-error", () => {
+    it("should call stateService with success state", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/422" data-state-success="success" data-state-error="error">Load</button><ng-view id="view"></ng-view>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(200);
+      expect(document.getElementById("view").innerHTML).toEqual("error");
+    });
+  });
+
+  describe("data-error", () => {
+    it("should evaluate expression passing result", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/422" data-error="res = $res">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(200);
+      expect(scope.res).toEqual("Invalid data");
+    });
+  });
 });

package/src/directive/http/http.js

@@ -1,4 +1,10 @@
-import { isObject } from "../../shared/utils.js";
+import { $injectTokens as $ } from "../../injection-tokens.js";
+import {
+  callBackAfterFirst,
+  isDefined,
+  isObject,
+  wait,
+} from "../../shared/utils.js";
 
 /**
  * @param {"get" | "delete" | "post" | "put"} method
@@ -7,13 +13,20 @@ import { isObject } from "../../shared/utils.js";
 function defineDirective(method) {
   const attrName = "ng" + method.charAt(0).toUpperCase() + method.slice(1);
   const directive = createHttpDirective(method, attrName);
-  directive["$inject"] = ["$http", "$compile", "$log"];
+  directive["$inject"] = [$.$http, $.$compile, $.$log, $.$parse, $.$state];
   return directive;
 }
 
+/** @type {import('../../interface.ts').DirectiveFactory} */
 export const ngGetDirective = defineDirective("get");
+
+/** @type {import('../../interface.ts').DirectiveFactory} */
 export const ngDeleteDirective = defineDirective("delete");
+
+/** @type {import('../../interface.ts').DirectiveFactory} */
 export const ngPostDirective = defineDirective("post");
+
+/** @type {import('../../interface.ts').DirectiveFactory} */
 export const ngPutDirective = defineDirective("put");
 
 /**
@@ -40,7 +53,7 @@ export function getEventNameForElement(element) {
  * Handles DOM manipulation based on a swap strategy and server-rendered HTML.
  *
  * @param {string} html - The HTML string returned from the server.
- * @param {import("../../interface.ts").SwapInsertPosition} swap
+ * @param {import("../../interface.ts").SwapModeType} swap
  * @param {Element} target - The target DOM element to apply the swap to.
  * @param {import('../../core/scope/scope.js').Scope} scope
  * @param {import('../../core/compile/compile.js').CompileFn} $compile
@@ -131,9 +144,11 @@ export function createHttpDirective(method, attrName) {
    * @param {import("interface.ts").HttpService} $http
    * @param {import("../../core/compile/compile.js").CompileFn} $compile
    * @param {import("../../services/log/interface.ts").LogService} $log
+   * @param {import("../../core/parse/interface.ts").ParseService} $parse
+   * @param {import("../../router/state/state-service.js").StateProvider} $state
    * @returns {import('../../interface.ts').Directive}
    */
-  return function ($http, $compile, $log) {
+  return function ($http, $compile, $log, $parse, $state) {
     /**
      * Collects form data from the element or its associated form.
      *
@@ -194,16 +209,38 @@ export function createHttpDirective(method, attrName) {
       restrict: "A",
       terminal: true,
       link(scope, element, attrs) {
-        /** @type {EventType} */
-        const eventName = getEventNameForElement(element);
+        const eventName =
+          attrs["trigger"] ||
+          /** @type {EventType} */ getEventNameForElement(element);
+
         const tag = element.tagName.toLowerCase();
 
-        element.addEventListener(eventName, (event) => {
+        if (isDefined(attrs["latch"])) {
+          attrs.$observe(
+            "latch",
+            callBackAfterFirst(() =>
+              element.dispatchEvent(new Event(eventName)),
+            ),
+          );
+        }
+
+        let throttled = false;
+        let intervalId;
+
+        if (isDefined(attrs["interval"])) {
+          element.dispatchEvent(new Event(eventName));
+          intervalId = setInterval(
+            () => element.dispatchEvent(new Event(eventName)),
+            parseInt(attrs["interval"]) || 1000,
+          );
+        }
+
+        element.addEventListener(eventName, async (event) => {
           if (/** @type {HTMLButtonElement} */ (element).disabled) return;
           if (tag === "form") event.preventDefault();
 
-          const swap = element.dataset.swap || "innerHTML";
-          const targetSelector = element.dataset.target;
+          const swap = attrs["swap"] || "innerHTML";
+          const targetSelector = attrs["target"];
           const target = targetSelector
             ? document.querySelector(targetSelector)
             : element;
@@ -220,18 +257,67 @@ export function createHttpDirective(method, attrName) {
           }
 
           const handler = (res) => {
+            if (isDefined(attrs["loading"])) {
+              attrs.$set("loading", false);
+            }
+
+            if (isDefined(attrs["loadingClass"])) {
+              attrs.$removeClass(attrs["loadingClass"]);
+            }
+
             const html = res.data;
+            if (200 <= res.status && res.status <= 299) {
+              if (isDefined(attrs["success"])) {
+                $parse(attrs["success"])(scope, { $res: html });
+              }
+
+              if (isDefined(attrs["stateSuccess"])) {
+                $state.go(attrs["stateSuccess"]);
+              }
+            } else if (400 <= res.status && res.status <= 599) {
+              if (isDefined(attrs["error"])) {
+                $parse(attrs["error"])(scope, { $res: html });
+              }
+
+              if (isDefined(attrs["stateError"])) {
+                $state.go(attrs["stateError"]);
+              }
+            }
+
             handleSwapResponse(
               html,
-              /** @type {import("../../interface.ts").SwapInsertPosition} */ (
-                swap
-              ),
+              /** @type {import("../../interface.ts").SwapModeType} */ (swap),
               target,
               scope,
               $compile,
             );
           };
 
+          if (isDefined(attrs["delay"])) {
+            await wait(parseInt(attrs["delay"]) | 0);
+          }
+
+          if (throttled) {
+            return;
+          }
+
+          if (isDefined(attrs["throttle"])) {
+            throttled = true;
+            attrs.$set("throttled", true);
+            setTimeout(() => {
+              attrs.$set("throttled", false);
+              throttled = false;
+            }, parseInt(attrs["throttle"]));
+          }
+
+          if (isDefined(attrs["loading"])) {
+            attrs.$set("loading", true);
+          }
+
+          if (isDefined(attrs["loadingClass"])) {
+            attrs.$addClass(attrs["loadingClass"]);
+          }
+
           if (method === "post" || method === "put") {
             const data = collectFormData(element);
             $http[method](url, data).then(handler).catch(handler);
@@ -239,6 +325,8 @@ export function createHttpDirective(method, attrName) {
             $http[method](url).then(handler).catch(handler);
           }
         });
+
+        scope.$on("$destroy", () => clearInterval(intervalId));
       },
     };
   };

package/src/directive/http/http.test.js

@@ -1,11 +1,11 @@
 import { test, expect } from "@playwright/test";
 
-const TEST_URL = "src/directive/http/http.html";
+const TEST_URL = "src/directive/http/http.html?random=false";
 
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
-  await page.waitForTimeout(3000);
+  await page.waitForTimeout(10000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/http/post.spec.js

@@ -1,4 +1,5 @@
 import { Angular } from "../../loader.js";
+import { dealoc } from "../../shared/dom.js";
 // import { browserTrigger, wait } from "../../shared/test-utils.js";
 
 describe("ngPost", () => {
@@ -6,6 +7,7 @@ describe("ngPost", () => {
 
   beforeEach(() => {
     el = document.getElementById("app");
+    dealoc(el);
     el.innerHTML = "";
     let angular = new Angular();
     angular.module("default", []);

package/src/directive/http/put.spec.js

@@ -1,4 +1,5 @@
 import { Angular } from "../../loader.js";
+import { dealoc } from "../../shared/dom.js";
 // import { browserTrigger, wait } from "../../shared/test-utils.js";
 
 describe("ngPut", () => {
@@ -6,6 +7,7 @@ describe("ngPut", () => {
 
   beforeEach(() => {
     el = document.getElementById("app");
+    dealoc(el);
     el.innerHTML = "";
     let angular = new Angular();
     angular.module("default", []);

package/src/directive/include/include.js

@@ -1,12 +1,12 @@
 import { isDefined } from "../../shared/utils.js";
 import { hasAnimate } from "../../shared/utils.js";
-import { $injectTokens } from "../../injection-tokens.js";
+import { $injectTokens as $t } from "../../injection-tokens.js";
 
 ngIncludeDirective.$inject = [
-  $injectTokens.$templateRequest,
-  $injectTokens.$anchorScroll,
-  $injectTokens.$animate,
-  $injectTokens.$exceptionHandler,
+  $t.$templateRequest,
+  $t.$anchorScroll,
+  $t.$animate,
+  $t.$exceptionHandler,
 ];
 
 /**
@@ -14,7 +14,7 @@ ngIncludeDirective.$inject = [
  * @param {*} $templateRequest
  * @param {import("../../services/anchor-scroll.js").AnchorScrollFunction} $anchorScroll
  * @param {*} $animate
- * @param {import('../../core/error-handler.js').ErrorHandler} $exceptionHandler
+ * @param {import('../../services/exception/interface.ts').Interface} $exceptionHandler
  * @returns {import('../../interface.js').Directive}
  */
 export function ngIncludeDirective(
@@ -133,7 +133,7 @@ export function ngIncludeDirective(
 // We need this directive so that the element content is already filled when
 // the link function of another directive on the same element as ngInclude
 // is called.
-ngIncludeFillContentDirective.$inject = ["$compile"];
+ngIncludeFillContentDirective.$inject = [$t.$compile];
 
 /**
  * @param {import("../../core/compile/compile.js").CompileFn} $compile

package/src/directive/input/input.js

@@ -323,7 +323,6 @@ export function createDateInputType(type, regexp, parseDate) {
     element,
     attr,
     ctrl,
-    $browser,
     $filter,
     $parse,
   ) {
@@ -610,15 +609,7 @@ export function isValidForStep(viewValue, stepBase, step) {
   return (value - stepBase) % step === 0;
 }
 
-export function numberInputType(
-  scope,
-  element,
-  attr,
-  ctrl,
-  $browser,
-  $filter,
-  $parse,
-) {
+export function numberInputType(scope, element, attr, ctrl, $filter, $parse) {
   badInputChecker(scope, element, attr, ctrl, "number");
   numberFormatterParser(ctrl);
   baseInputType(scope, element, attr, ctrl);
@@ -934,15 +925,7 @@ function parseConstantExpr($parse, context, name, expression, fallback) {
   return fallback;
 }
 
-function checkboxInputType(
-  scope,
-  element,
-  attr,
-  ctrl,
-  $browser,
-  $filter,
-  $parse,
-) {
+function checkboxInputType(scope, element, attr, ctrl, $filter, $parse) {
   const trueValue = parseConstantExpr(
     $parse,
     scope,
@@ -980,30 +963,25 @@ function checkboxInputType(
   ctrl.$parsers.push((value) => (value ? trueValue : falseValue));
 }
 
-/**
- * @returns {import('../../interface.ts').Directive}
- */
-inputDirective.$inject = ["$browser", "$filter", "$parse"];
+inputDirective.$inject = ["$filter", "$parse"];
 
 /**
- * @param {import('../../services/browser').Browser} $browser
  * @param {*} $filter
  * @param {*} $parse
- * @returns
+ * @returns {import('../../interface.ts').Directive}
  */
-export function inputDirective($browser, $filter, $parse) {
+export function inputDirective($filter, $parse) {
   return {
     restrict: "E",
     require: ["?ngModel"],
     link: {
       pre(scope, element, attr, ctrls) {
         if (ctrls[0]) {
-          (inputType[lowercase(attr.type)] || inputType.text)(
+          (inputType[lowercase(attr["type"])] || inputType.text)(
             scope,
             element,
             attr,
             ctrls[0],
-            $browser,
             $filter,
             $parse,
           );

package/src/directive/messages/messages.js

@@ -103,7 +103,7 @@ class NgMessageCtrl {
   reRender() {
     if (!this.renderLater) {
       this.renderLater = true;
-      this.$scope.$evalAsync(() => {
+      Promise.resolve().then(() => {
         if (this.renderLater && this.cachedCollection) {
           this.render(this.cachedCollection);
         }
@@ -238,6 +238,10 @@ export const ngMessageDirective = ngMessageDirectiveFactory(false);
 export const ngMessageExpDirective = ngMessageDirectiveFactory(false);
 export const ngMessageDefaultDirective = ngMessageDirectiveFactory(true);
 
+/**
+ * @param {boolean} isDefault
+ * @returns {(any) => import("../../interface.js").Directive}
+ */
 function ngMessageDirectiveFactory(isDefault) {
   ngMessageDirective.$inject = ["$animate"];
   function ngMessageDirective($animate) {

package/src/directive/model/model.js

@@ -78,7 +78,7 @@ export class NgModelController {
 
   /**
    * @param {import('../../core/scope/scope.js').Scope} $scope
-   * @param {import('../../core/exception-handler.js').ErrorHandler} $exceptionHandler
+   * @param {import('../../services/exception/exception-handler.js').ErrorHandler} $exceptionHandler
    * @param {import('../../core/compile/attributes.js').Attributes} $attr
    * @param {Element} $element
    * @param {import("../../core/parse/interface.ts").ParseService} $parse