@angular-wave/angular.ts 0.7.1 → 0.7.3

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@angular-wave/angular.ts",
-  "description": "A modern, optimized and typesafe version of AngularTS",
+  "description": "A modern, optimized and typesafe version of AngularJS",
   "license": "MIT",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "type": "module",
   "main": "dist/angular-ts.esm.js",
   "module": "dist/angular-ts.esm.js",

package/playwright.config.ts

@@ -28,6 +28,8 @@ export default defineConfig({
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: baseUrl,
 
+    screenshot: "only-on-failure",
+
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
   },

package/src/animations/animate.spec.js

@@ -1,4 +1,4 @@
-import { dealoc, JQLite } from "../../shared/dom.js";
+import { dealoc } from "../../shared/dom.js";
 import { Angular } from "../../loader.js";
 import { isObject } from "../../shared/utils.js";
 import { isFunction } from "../../shared/utils.js";

package/src/binding.spec.js

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

package/src/core/cache/cache.js

@@ -1,9 +1,6 @@
 /**
  * @typedef {Object} ExpandoStore
- *
  * @property {!Object<string, any>} data
- * @property {!Object} events
- * @property {?Function} handle
  *
  */
 

package/src/core/compile/compile.js

@@ -3204,7 +3204,9 @@ export class CompileProvider {
           }
 
           function triggerOnChangesHook() {
-            destination["$onChanges"] && destination["$onChanges"](changes);
+            destination["$onChanges"] &&
+              changes &&
+              destination["$onChanges"](changes);
             // Now clear the changes so that we schedule onChanges when more changes arrive
             changes = undefined;
           }

package/src/core/compile/compile.spec.js

@@ -8070,7 +8070,7 @@ describe("$compile", () => {
           $rootScope.$apply("val = 42");
           await wait();
 
-          // Now we should have a single changes entry in the log
+          // Now we should have a double changes entry in the log
           expect(log[0]).toEqual({
             prop1: jasmine.objectContaining({ currentValue: 42 }),
           });
@@ -8081,7 +8081,7 @@ describe("$compile", () => {
           // Clear the log
           log = [];
 
-          // // Update val to trigger the onChanges
+          // Update val to trigger the onChanges
           $rootScope.$apply("val = 17");
           await wait();
           expect(log[0]).toEqual({
@@ -8381,65 +8381,6 @@ describe("$compile", () => {
           expect(prototypeSpy).not.toHaveBeenCalled();
         });
 
-        xit("should not call `$onChanges` twice even when the initial value is `NaN`", async () => {
-          const onChangesSpy = jasmine.createSpy("$onChanges");
-
-          module.component("test", {
-            bindings: { prop: "<", attr: "@" },
-            controller: function TestController() {
-              this.$onChanges = onChangesSpy;
-            },
-          });
-
-          createInjector(["test1"]).invoke((_$compile_, _$rootScope_) => {
-            $compile = _$compile_;
-            $rootScope = _$rootScope_;
-          });
-
-          const template =
-            '<test prop="a" attr="{{a}}"></test>' +
-            '<test prop="b" attr="{{b}}"></test>';
-          $rootScope.a = "foo";
-          $rootScope.b = NaN;
-
-          element = $compile(template)($rootScope);
-          await wait();
-          expect(onChangesSpy).toHaveBeenCalledTimes(2);
-          expect(onChangesSpy.calls.argsFor(0)[0]).toEqual({
-            prop: jasmine.objectContaining({ currentValue: "foo" }),
-            attr: jasmine.objectContaining({ currentValue: "foo" }),
-          });
-          expect(onChangesSpy.calls.argsFor(1)[0]).toEqual({
-            prop: jasmine.objectContaining({ currentValue: NaN }),
-            attr: jasmine.objectContaining({ currentValue: "NaN" }),
-          });
-
-          onChangesSpy.calls.reset();
-          $rootScope.$apply('a = "bar"; b = 42');
-          await wait();
-          expect(onChangesSpy).toHaveBeenCalledTimes(2);
-          expect(onChangesSpy.calls.argsFor(0)[0]).toEqual({
-            prop: jasmine.objectContaining({
-              previousValue: "foo",
-              currentValue: "bar",
-            }),
-            attr: jasmine.objectContaining({
-              previousValue: "foo",
-              currentValue: "bar",
-            }),
-          });
-          expect(onChangesSpy.calls.argsFor(1)[0]).toEqual({
-            prop: jasmine.objectContaining({
-              previousValue: NaN,
-              currentValue: 42,
-            }),
-            attr: jasmine.objectContaining({
-              previousValue: "NaN",
-              currentValue: "42",
-            }),
-          });
-        });
-
         it("should only trigger one extra digest however many controllers have changes", async () => {
           let log = [];
           function TestController1() {}
@@ -9420,56 +9361,29 @@ describe("$compile", () => {
             expect(log).toEqual(["constructor", "$onInit"]);
           });
 
-          xit("should update isolate again after $onInit if outer has changed (before initial watchAction call)", () => {
+          it("should update isolate again after $onInit if outer has changed (before initial watchAction call)", async () => {
             $rootScope.name = "outer1";
             $compile('<ow-component input="name"></ow-component>')($rootScope);
 
             expect(component.input).toEqual("$onInit");
             $rootScope.$apply('name = "outer2"');
-
+            await wait();
             expect($rootScope.name).toEqual("outer2");
             expect(component.input).toEqual("outer2");
-
-            expect(log).toEqual([
-              "constructor",
-              [
-                "$onChanges",
-                jasmine.objectContaining({ currentValue: "outer1" }),
-              ],
-              "$onInit",
-              [
-                "$onChanges",
-                jasmine.objectContaining({
-                  currentValue: "outer2",
-                }),
-              ],
-            ]);
+            expect(log).toEqual(["constructor", "$onInit"]);
           });
 
-          xit("should update isolate again after $onInit if outer has changed (before initial watchAction call)", () => {
+          it("should update isolate again after $onInit if outer has changed (before initial watchAction call)", async () => {
             $rootScope.name = "outer1";
             $compile('<ow-component input="name" change-input></ow-component>')(
               $rootScope,
             );
-
             expect(component.input).toEqual("$onInit");
+
+            await wait();
             expect($rootScope.name).toEqual("outer2");
             expect(component.input).toEqual("outer2");
-            expect(log).toEqual([
-              "constructor",
-              [
-                "$onChanges",
-                jasmine.objectContaining({ currentValue: "outer1" }),
-              ],
-              "$onInit",
-              [
-                "$onChanges",
-                jasmine.objectContaining({
-                  currentValue: "outer2",
-                  previousValue: "outer1",
-                }),
-              ],
-            ]);
+            expect(log).toEqual(["constructor", "$onInit"]);
           });
 
           it("should not break when isolate and origin both change to the same value", async () => {

package/src/core/di/injector.js

@@ -51,7 +51,7 @@ export function createInjector(modulesToLoad, strictDi = false) {
     strictDi,
   ));
 
-  const protoInstanceInjector = new InjectorService(strictDi, providerInjector);
+  const protoInstanceInjector = new InjectorService(providerInjector, strictDi);
 
   providerCache.$injectorProvider = {
     // $injectionProvider return instance injector

package/src/core/di/injector.spec.js

@@ -369,36 +369,6 @@ describe("injector.modules", () => {
     fn.$inject = ["a", "b"];
     expect(injector.invoke(fn, undefined, { b: 3 })).toBe(4);
   });
-
-  it("should expose the loaded module info on the instance injector", () => {
-    angular.module("test1", ["test2"]).info({ version: "1.1" });
-    angular.module("test2", []).info({ version: "1.2" });
-    const injector = createInjector(["test1"]);
-
-    injector.invoke(function ($injector) {
-      expect($injector.modules.test1.info()).toEqual({ version: "1.1" });
-      expect($injector.modules.test2.info()).toEqual({ version: "1.2" });
-    });
-  });
-
-  it("should expose the loaded module info on the provider injector", () => {
-    let providerInjector;
-    const test1 = angular.module("test1", ["test2"]).info({ version: "1.1" });
-    const test2 = angular
-      .module("test2", [])
-      .info({ version: "1.2" })
-      .provider("test", [
-        "$injector",
-        function ($injector) {
-          providerInjector = $injector;
-          return { $get() {} };
-        },
-      ]);
-    createInjector(["test1"]);
-
-    expect(providerInjector.modules.test1.info()).toEqual({ version: "1.1" });
-    expect(providerInjector.modules.test2.info()).toEqual({ version: "1.2" });
-  });
 });
 
 describe("annotate", () => {

package/src/core/di/internal-injector.js

@@ -149,7 +149,6 @@ class AbstractInjector {
 
 /**
  * Injector for providers
- * @extends {AbstractInjector}
  */
 export class ProviderInjector extends AbstractInjector {
   /**
@@ -179,15 +178,13 @@ export class ProviderInjector extends AbstractInjector {
 
 /**
  * Injector for factories and services
- * @extends {AbstractInjector}
  */
 export class InjectorService extends AbstractInjector {
   /**
-   *
-   * @param {boolean} strictDi - Indicates if strict dependency injection is enforced.
    * @param {ProviderInjector} providerInjector
+   * @param {boolean} strictDi - Indicates if strict dependency injection is enforced.
    */
-  constructor(strictDi, providerInjector) {
+  constructor(providerInjector, strictDi) {
     super(strictDi);
     this.providerInjector = providerInjector;
     this.modules = this.providerInjector.modules;

package/src/core/di/ng-module.js

@@ -1,11 +1,5 @@
 import { $injectTokens } from "../../injection-tokens.js";
-import {
-  isFunction,
-  isDefined,
-  isObject,
-  isString,
-  assert,
-} from "../../shared/utils.js";
+import { isFunction, isString, assert } from "../../shared/utils.js";
 
 export const INJECTOR_LITERAL = "$injector";
 export const COMPILE_LITERAL = "$compileProvider";
@@ -56,27 +50,11 @@ export class NgModule {
     /** @type {!Array.<Function>} */
     this.runBlocks = [];
 
-    /** @type {Object} */
-    this.infoState = {};
-
     if (configFn) {
       this.config(configFn);
     }
   }
 
-  /**
-   * @param {Object} value
-   * @returns
-   */
-  info(value) {
-    if (isDefined(value)) {
-      assert(isObject(value), "module info value must be an object");
-      this.infoState = value;
-      return this;
-    }
-    return this.infoState;
-  }
-
   /**
    * @param {string} name
    * @param {any} object

package/src/core/di/ng-module.spec.js

@@ -26,12 +26,6 @@ describe("NgModule", () => {
     expect(() => new NgModule("test")).toThrowError();
   });
 
-  it("can store info state as objects", () => {
-    expect(() => ngModule.info(false)).toThrowError();
-    ngModule.info({ a: 1 });
-    expect(ngModule.info().a).toBe(1);
-  });
-
   it("can store constants", () => {
     // when contants are registered
     ngModule.constant("aConstant", 42);

package/src/core/exception-handler.js

@@ -42,7 +42,7 @@
  * @see {@link angular.ErrorHandler AngularTS ErrorHandler}
  */
 
-/** @typedef {import('../services/log').LogService} LogService */
+/** @typedef {import('../services/log.js').LogService} LogService */
 
 /** @typedef {import("./error-handler.ts").ErrorHandler}  ErrorHandler */
 

package/src/core/pubsub/pubsub.js

@@ -29,10 +29,10 @@ export class PubSub {
    * strings corresponding to native Object properties, e.g. "constructor",
    * "toString", "hasOwnProperty", etc.
    *
-   * @param {boolean=} opt_async Enable asynchronous behavior.  Recommended for
+   * @param {boolean=} async Enable asynchronous behavior.  Recommended for
    *     new code.  See notes on the publish() method.
    */
-  constructor(opt_async = false) {
+  constructor(async = false) {
     this.disposed = false;
 
     /**
@@ -89,7 +89,7 @@ export class PubSub {
     /**
      * @private @const {boolean}
      */
-    this.async_ = Boolean(opt_async);
+    this.async_ = Boolean(async);
   }
 
   /**
@@ -173,9 +173,9 @@ export class PubSub {
    * @param {Array} args Arguments to pass to the function.
    */
   static runAsync_(fn, context, args) {
-    setTimeout(() => {
+    Promise.resolve().then(() => {
       fn.apply(context, args);
-    }, 0);
+    });
   }
 
   /**
@@ -241,7 +241,7 @@ export class PubSub {
    * the order in which they were added, passing all arguments along.
    *
    * If this object was created with async=true, subscribed functions are called
-   * via setTimeout().  Otherwise, the functions are called directly, and if
+   * via Promise.resolve().  Otherwise, the functions are called directly, and if
    * any of them throw an uncaught error, publishing is aborted.
    *
    * @param {string} topic Topic to publish to.

package/src/directive/channel/channel.js

@@ -1,9 +1,10 @@
-import { EventBus } from "../../core/pubsub/pubsub.js";
 import { isObject } from "../../shared/utils.js";
+import { $injectTokens } from "../../injection-tokens.js";
 
+ngChannelDirective.$inject = [$injectTokens.$eventBus];
 /**
  * Dynamically updates an element's content based on events published on a specified channel.
- * If data is sent via `EventBus` on the specified `ngChannel`, the directive attempts to update the element's content accordingly,
+ * If data is sent via `$eventBus` on the specified `ngChannel`, the directive attempts to update the element's content accordingly,
  * either by directly setting the inner HTML or merging the scope's data if the element contains a template.
  *
  * If the element has a template and incoming data is an object, the directive will merge all key/value pairs onto the scope,
@@ -16,17 +17,18 @@ import { isObject } from "../../shared/utils.js";
  * <div ng-channel="userChannel">Hello {{ user.firstName }} {{ user.lastName }}</div>
  *
  * JavaScript:
- * angular.EventBus.publish('userChannel', { user: { firstName: 'John', lastName: 'Smith' } });
+ * angular.$eventBus.publish('userChannel', { user: { firstName: 'John', lastName: 'Smith' } });
  *
+ * @param {import("../../core/pubsub/pubsub.js").PubSub} $eventBus
  * @returns {import("../../interface.ts").Directive}
  */
-export function ngChannelDirective() {
+export function ngChannelDirective($eventBus) {
   return {
     link: (scope, element, attrs) => {
       const hasTemplate = element.childNodes.length > 0;
       const channel = attrs["ngChannel"];
 
-      const key = EventBus.subscribe(channel, async (val) => {
+      const key = $eventBus.subscribe(channel, (val) => {
         if (!hasTemplate) {
           element.innerHTML = val;
         } else {
@@ -37,7 +39,7 @@ export function ngChannelDirective() {
       });
 
       scope.$on("$destroy", () => {
-        EventBus.unsubscribeByKey(key);
+        $eventBus.unsubscribeByKey(key);
       });
     },
   };

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

@@ -0,0 +1,24 @@
+import { Angular } from "../../loader.js";
+// import { browserTrigger, wait } from "../../shared/test-utils.js";
+
+describe("ngDelete", () => {
+  let $compile, $rootScope, $httpBackend, el;
+
+  beforeEach(() => {
+    el = document.getElementById("app");
+    el.innerHTML = "";
+    let angular = new Angular();
+    angular.module("default", []);
+    angular
+      .bootstrap(el, ["default"])
+      .invoke((_$compile_, _$rootScope_, _$httpBackend_) => {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $httpBackend = _$httpBackend_;
+      });
+  });
+
+  it("should pass", () => {
+    expect(true).toBeTrue();
+  });
+});

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

@@ -0,0 +1,211 @@
+import { Angular } from "../../loader.js";
+import { browserTrigger, wait } from "../../shared/test-utils.js";
+
+describe("ngGet", () => {
+  let $compile, $rootScope, $log, el;
+
+  beforeEach(() => {
+    el = document.getElementById("app");
+    el.innerHTML = "";
+    let angular = new Angular();
+    angular.module("default", []);
+    angular
+      .bootstrap(el, ["default"])
+      .invoke((_$compile_, _$rootScope_, _$log_) => {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $log = _$log_;
+      });
+  });
+
+  it("should replace innerHTML (default) on click", async () => {
+    const scope = $rootScope.$new();
+    el.innerHTML = '<button ng-get="/mock/hello">Load</button>';
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.innerText).toBe("Hello");
+  });
+
+  it("should replace innerHTML (default) on click when used with expression", async () => {
+    const scope = $rootScope.$new();
+    el.innerHTML = '<button ng-get="/mock/{{a}}">Load</button>';
+    scope.a = "div";
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.firstChild.innerHTML).toBe("<div>Hello</div>");
+  });
+
+  it("should replace innerHTML on error", async () => {
+    const scope = $rootScope.$new();
+    el.innerHTML = '<button ng-get="/mock/422">Load</button>';
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.innerText).toBe("Invalid data");
+  });
+
+  it("should not trigger request if element is disabled", async () => {
+    el.innerHTML = '<button ng-get="/mock/hello" disabled>Load</button>';
+    const scope = $rootScope.$new();
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.innerText).toBe("Load");
+  });
+
+  it("should replace innerHTML on statuc error without a body", async () => {
+    const scope = $rootScope.$new();
+    el.innerHTML = '<button ng-get="/mock/401">Load</button>';
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.innerText).toBe("Unauthorized");
+  });
+
+  describe("data-swap", () => {
+    it("should not change anything if swap is 'none'", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="none" data-target="#found">Load</button><div id="found">Original</div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const found = el.querySelector("#found");
+      expect(found.textContent).toBe("Original");
+    });
+
+    it("should replace outerHTML on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-swap="outerHTML">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.innerText).toBe("Hello");
+    });
+
+    it("should replace textcontent on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-swap="textContent">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.innerText).toBe("Hello");
+    });
+
+    it("should replace beforebegin on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="beforebegin">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.firstChild.innerText).toBe("Hello");
+    });
+
+    it("should replace beforeend on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="beforeend">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.firstChild.lastChild.innerText).toBe("Hello");
+    });
+
+    it("should delete the target on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-swap="delete" data-target="#found">Load</button><div id="found"></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.querySelector("#found")).toBeNull();
+    });
+  });
+
+  describe("data-target", () => {
+    it("should remain unchanged if target is not found and log a warning", async () => {
+      const scope = $rootScope.$new();
+      spyOn($log, "warn");
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-target="#missing">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.firstChild.innerText).toBe("Load");
+      expect($log.warn).toHaveBeenCalled();
+    });
+
+    it("should replace target innerHTML (default) on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-target="#found">Load</button><div id="found"></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.lastChild.innerHTML).toBe("Hello");
+    });
+
+    it("should replace textcontent on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-swap="textContent" data-target="#found">Load</button><div id="found"></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.lastChild.innerText).toBe("Hello");
+    });
+
+    it("should replace beforebegin on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="beforebegin" data-target="#found">Load</button><div id="found"></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const found = el.querySelector("#found");
+      // The sibling before #found should contain "Hello"
+      const prevSibling = found.previousSibling;
+      expect(prevSibling.textContent).toBe("Hello");
+      expect(found.textContent).toBe(""); // found itself unchanged
+    });
+
+    it("should replace beforeend on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="beforeend" data-target="#found">Load</button><div id="found"></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const found = el.querySelector("#found");
+      expect(found.textContent).toBe("Hello");
+    });
+
+    it("should insert afterbegin on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="afterbegin" data-target="#found">Load</button><div id="found"><div>World</div></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const found = el.querySelector("#found");
+      expect(found.textContent).toBe("HelloWorld");
+    });
+
+    it("should insert afterend on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="afterend" data-target="#found">Load</button><div id="found"><div>World</div></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const found = el.querySelector("#found");
+      const next = found.nextSibling;
+      expect(el.lastChild.textContent).toBe("Hello");
+    });
+  });
+});