@angular-wave/angular.ts 0.4.3 → 0.4.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@angular-wave/angular.ts",
   "description": "A modern, optimized and typesafe version of AngularJS",
   "license": "MIT",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "type": "module",
   "main": "dist/angular-ts.esm.js",
   "browser": "dist/angular-ts.umd.js",

package/src/core/cache/cache.js

@@ -7,7 +7,7 @@
  *
  */
 
-export const EXPANDO = "ngId";
+export const EXPANDO = "ng";
 
 /**
  * Expando cache for adding properties to DOM nodes with JavaScript.
@@ -17,31 +17,4 @@ export const EXPANDO = "ngId";
  *
  * @type {Map<number, ExpandoStore>}
  */
-export const CACHE = new Proxy(new Map(), {
-  get(target, prop, receiver) {
-    if (prop === "size") {
-      return target.size;
-    }
-    if (typeof target[prop] === "function") {
-      return function (...args) {
-        return target[prop].apply(target, args);
-      };
-    }
-    return Reflect.get(target, prop, receiver);
-  },
-  set(target, prop, value, receiver) {
-    return Reflect.set(target, prop, value, receiver);
-  },
-  deleteProperty(target, prop) {
-    return Reflect.deleteProperty(target, prop);
-  },
-  has(target, prop) {
-    return Reflect.has(target, prop);
-  },
-  ownKeys(target) {
-    return Reflect.ownKeys(target);
-  },
-  getOwnPropertyDescriptor(target, prop) {
-    return Reflect.getOwnPropertyDescriptor(target, prop);
-  },
-});
+export const CACHE = new Map();

package/src/core/compile/compile.js

@@ -906,7 +906,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
           containingScope,
         ) {
           if (!transcludedScope) {
-            transcludedScope = scope.$new(false, containingScope);
+            transcludedScope = scope.$transcluded(containingScope);
             transcludedScope.$$transcluded = true;
           }
 

package/src/core/compile/compile.test.js

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

package/src/core/location/location.js

@@ -2,7 +2,6 @@ import { JQLite } from "../../shared/jqlite/jqlite";
 import { urlResolve } from "../url-utils/url-utils";
 import {
   encodeUriSegment,
-  isBoolean,
   isDefined,
   isNumber,
   isObject,
@@ -330,7 +329,6 @@ export class Location {
     // so the modification window is narrow.
     this.$$state = isUndefined(state) ? null : state;
     this.$$urlUpdatedByLocation = true;
-
     return this;
   }
 
@@ -544,26 +542,28 @@ export class LocationHashbangUrl extends Location {
   }
 }
 
-export function LocationProvider() {
-  let hashPrefix = "!";
-  const html5Mode = {
-    enabled: false,
-    requireBase: true,
-    rewriteLinks: true,
-  };
+export class LocationProvider {
+  constructor() {
+    this.hashPrefixValue = "!";
+    this.html5ModeConfig = {
+      enabled: false,
+      requireBase: true,
+      rewriteLinks: true,
+    };
+  }
 
   /**
    * The default value for the prefix is `'!'`.
-   * @param {string=} prefix Prefix for hash part (containing path and search)
-   * @returns {*} current value if used as getter or itself (chaining) if used as setter
+   * @param {string=} prefix - Prefix for hash part (containing path and search)
+   * @returns {string|LocationProvider} current value if used as getter or itself (chaining) if used as setter
    */
-  this.hashPrefix = function (prefix) {
-    if (isDefined(prefix)) {
-      hashPrefix = prefix;
+  hashPrefix(prefix) {
+    if (typeof prefix !== "undefined") {
+      this.hashPrefixValue = prefix;
       return this;
     }
-    return hashPrefix;
-  };
+    return this.hashPrefixValue;
+  }
 
   /**
    * @param {(boolean|Object)=} mode If boolean, sets `html5Mode.enabled` to value.
@@ -585,30 +585,29 @@ export function LocationProvider() {
    *
    * @returns {Object} html5Mode object if used as getter or itself (chaining) if used as setter
    */
-  this.html5Mode = function (mode) {
-    if (isBoolean(mode)) {
-      html5Mode.enabled = mode;
+  html5Mode(mode) {
+    if (typeof mode === "boolean") {
+      this.html5ModeConfig.enabled = mode;
       return this;
     }
-    if (isObject(mode)) {
-      if (isBoolean(mode.enabled)) {
-        html5Mode.enabled = mode.enabled;
-      }
 
-      if (isBoolean(mode.requireBase)) {
-        html5Mode.requireBase = mode.requireBase;
-      }
-
-      if (isBoolean(mode.rewriteLinks) || isString(mode.rewriteLinks)) {
-        html5Mode.rewriteLinks = mode.rewriteLinks;
+    if (typeof mode === "object") {
+      if (typeof mode.enabled === "boolean")
+        this.html5ModeConfig.enabled = mode.enabled;
+      if (typeof mode.requireBase === "boolean")
+        this.html5ModeConfig.requireBase = mode.requireBase;
+      if (
+        typeof mode.rewriteLinks === "boolean" ||
+        typeof mode.rewriteLinks === "string"
+      ) {
+        this.html5ModeConfig.rewriteLinks = mode.rewriteLinks;
       }
-
       return this;
     }
-    return html5Mode;
-  };
+    return this.html5ModeConfig;
+  }
 
-  this.$get = [
+  $get = [
     "$rootScope",
     "$browser",
     "$rootElement",
@@ -627,8 +626,8 @@ export function LocationProvider() {
       const initialUrl = /** @type {string} */ ($browser.url());
       let appBase;
 
-      if (html5Mode.enabled) {
-        if (!baseHref && html5Mode.requireBase) {
+      if (this.html5Mode.enabled) {
+        if (!baseHref && this.html5Mode.requireBase) {
           throw $locationMinErr(
             "nobase",
             "$location in HTML5 mode requires a <base> tag to be present!",
@@ -642,7 +641,11 @@ export function LocationProvider() {
       }
       const appBaseNoFile = stripFile(appBase);
 
-      $location = new LocationMode(appBase, appBaseNoFile, `#${hashPrefix}`);
+      $location = new LocationMode(
+        appBase,
+        appBaseNoFile,
+        `#${this.hashPrefix}`,
+      );
       $location.$$parseLinkUrl(initialUrl, initialUrl);
 
       $location.$$state = $browser.state();
@@ -669,7 +672,7 @@ export function LocationProvider() {
       }
 
       $rootElement.on("click", (event) => {
-        const { rewriteLinks } = html5Mode;
+        const { rewriteLinks } = this.html5Mode;
         // TODO(vojta): rewrite link when opening in new tab/window (in legacy browser)
         // currently we open nice url link and redirect then
 
@@ -772,7 +775,7 @@ export function LocationProvider() {
       });
 
       // update browser
-      $rootScope.$watch(() => {
+      function browserUpdate() {
         if (initializing || $location.$$urlUpdatedByLocation) {
           $location.$$urlUpdatedByLocation = false;
 
@@ -820,7 +823,9 @@ export function LocationProvider() {
 
         // we don't need to return anything because $evalAsync will make the digest loop dirty when
         // there is a change
-      });
+      }
+
+      setTimeout(() => browserUpdate());
 
       return $location;
 
@@ -832,6 +837,7 @@ export function LocationProvider() {
           $location.$$state,
           oldState,
         );
+        browserUpdate();
       }
     },
   ];

package/src/core/scope/scope.js

@@ -208,11 +208,6 @@ export class Scope {
     /** @type {number} */
     this.$$watchersCount = 0;
     this.$$isolateBindings = null;
-
-    /**
-     * @type {?Scope}
-     */
-    this.$$ChildScope = null;
   }
 
   /**
@@ -230,16 +225,11 @@ export class Scope {
    *         When creating widgets, it is useful for the widget to not accidentally read parent
    *         state.
    *
-   * @param {?Scope} [parent=this] The {@link ng.$rootScope.Scope `Scope`} that will be the `$parent`
-   *                              of the newly created scope. Defaults to `this` scope if not provided.
-   *                              This is used when creating a transclude scope to correctly place it
-   *                              in the scope hierarchy while maintaining the correct prototypical
-   *                              inheritance.
    *
    * @returns {Scope} The newly created child scope.
    *
    */
-  $new(isolate, parent) {
+  $new(isolate) {
     let child = isolate ? new Scope() : Object.create(this);
 
     if (isolate) {
@@ -254,11 +244,10 @@ export class Scope {
       child.$$listeners = new Map();
       child.$$listenerCount = {};
       child.$$watchersCount = 0;
-      child.$$ChildScope = null;
       child.$$suspended = false;
     }
 
-    child.$parent = parent || this;
+    child.$parent = this;
     child.$$prevSibling = child.$parent.$$childTail;
 
     if (child.$parent.$$childHead) {
@@ -270,7 +259,7 @@ export class Scope {
     }
 
     // Add a destroy listener if isolated or the parent differs from `this`
-    if (isolate || parent !== this) {
+    if (isolate) {
       child.$on("$destroy", ($event) => {
         $event.currentScope.$$destroyed = true;
       });
@@ -279,6 +268,49 @@ export class Scope {
     return child;
   }
 
+  /**
+   * Creates a transcluded scope
+   * @param {Scope} parent The {@link ng.$rootScope.Scope `Scope`} that will be the `$parent`
+   * of the newly created scope. This is used when creating a transclude scope to correctly place it
+   *  in the scope hierarchy while maintaining the correct prototypical inheritance.
+   *
+   * @returns {Scope} The newly created child scope.
+   *
+   */
+  $transcluded(parent) {
+    let child = Object.create(this);
+
+    // Initialize properties for a non-isolated child scope
+    child.$id = nextUid();
+    child.$$watchers = [];
+    child.$$nextSibling = null;
+    child.$$childHead = null;
+    child.$$childTail = null;
+    child.$$listeners = new Map();
+    child.$$listenerCount = {};
+    child.$$watchersCount = 0;
+    child.$$suspended = false;
+
+    child.$parent = parent || this;
+    child.$$prevSibling = child.$parent.$$childTail;
+
+    if (child.$parent.$$childHead) {
+      child.$parent.$$childTail.$$nextSibling = child;
+      child.$parent.$$childTail = child;
+    } else {
+      child.$parent.$$childHead = child;
+      child.$parent.$$childTail = child;
+    }
+
+    // Add a destroy listener if isolated or the parent differs from `this`
+    if (parent !== this) {
+      child.$on("$destroy", ($event) => {
+        $event.currentScope.$$destroyed = true;
+      });
+    }
+
+    return child;
+  }
   /**
  * Registers a `listener` callback to be executed whenever the `watchExpression` changes.
  *

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

@@ -135,7 +135,7 @@ describe("Scope", function () {
 
     it("should attach the child scope to a specified parent", () => {
       const isolated = $rootScope.$new(true);
-      const trans = $rootScope.$new(false, isolated);
+      const trans = $rootScope.$transcluded(isolated);
       $rootScope.a = 123;
       expect(isolated.a).toBeUndefined();
       expect(trans.a).toEqual(123);

package/src/core/url-utils/url-utils.spec.js

@@ -65,7 +65,7 @@ describe("urlUtils", () => {
 
       expectIsSameOrigin("path", true);
 
-      const origin = urlResolve(document.location.href);
+      const origin = urlResolve(window.location.href);
       expectIsSameOrigin(`//${origin.host}/path`, true);
 
       // Different domain.

package/src/directive/{list/list.html → channel/channel.html}

@@ -10,7 +10,7 @@
     <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/list/list.spec.js"></script>
+    <script type="module" src="/src/directive/channel/channel.spec.js"></script>
   </head>
   <body>
     <div id="dummy"></div>

package/src/directive/channel/channel.js

@@ -0,0 +1,29 @@
+import { EventBus } from "../../core/pubsub/pubsub";
+
+/**
+ * Dynamically updates an element's content based on events published on a specified channel.
+ * When the directive is applied, it listens for data sent via `EventBus` and
+ * updates the inner HTML of the element accordingly.
+ *
+ * When the scope is destroyed, the directive automatically unsubscribes from the channel.
+ *
+ *
+ * @returns {import("../../types").Directive}
+ */
+export function ngChannelDirective() {
+  return {
+    restrict: "EA",
+    link: (scope, element, attrs) => {
+      const targetElement = element[0];
+      const channel = attrs["ngChannel"];
+
+      const key = EventBus.subscribe(channel, (val) => {
+        targetElement.innerHTML = val;
+      });
+
+      scope.$on("$destroy", () => {
+        EventBus.unsubscribeByKey(key);
+      });
+    },
+  };
+}

package/src/directive/channel/channel.spec.js

@@ -0,0 +1,52 @@
+import { Angular } from "../../loader";
+import { EventBus } from "../../core/pubsub/pubsub";
+import { wait } from "../../shared/test-utils";
+
+describe("channel", () => {
+  let $compile, $scope, element, unsubscribeSpy;
+
+  beforeEach(() => {
+    window.angular = new Angular();
+    angular.module("myModule", ["ng"]);
+    angular
+      .bootstrap(document.getElementById("dummy"), ["myModule"])
+      .invoke((_$compile_, _$rootScope_) => {
+        $compile = _$compile_;
+        $scope = _$rootScope_;
+      });
+
+    spyOn(EventBus, "subscribe").and.callThrough();
+    unsubscribeSpy = spyOn(EventBus, "unsubscribeByKey").and.callThrough();
+  });
+
+  it("should subscribe to the specified EventBus channel", () => {
+    element = $compile('<div ng-channel="testChannel"></div>')($scope);
+    $scope.$digest();
+
+    expect(EventBus.subscribe).toHaveBeenCalledWith(
+      "testChannel",
+      jasmine.any(Function),
+    );
+  });
+
+  it("should update innerHtml when EventBus emits a value", async () => {
+    element = $compile('<div ng-channel="testChannel"></div>')($scope);
+    $scope.$digest();
+
+    expect(element[0].innerHTML).toBe("");
+
+    EventBus.publish("testChannel", "New Content");
+    await wait(10);
+
+    expect(element[0].innerHTML).toBe("New Content");
+  });
+
+  it("should unsubscribe from the EventBus when the scope is destroyed", () => {
+    element = $compile('<div ng-channel="testChannel"></div>')($scope);
+    $scope.$digest();
+
+    $scope.$destroy();
+
+    expect(unsubscribeSpy).toHaveBeenCalled();
+  });
+});

package/src/directive/{list/list.test.js → channel/channel.test.js}

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