@angular-wave/angular.ts 0.7.0-beta.0 → 0.7.0-beta.1

package/src/router/common/queue.js

@@ -1,50 +1,105 @@
 import { pushTo } from "../../shared/common.js";
 
+/**
+ * A simple bounded FIFO queue with optional eviction notifications.
+ * @template T
+ */
 export class Queue {
-  constructor(_items = [], _limit = null) {
-    this._items = _items;
-    this._limit = _limit;
+  /**
+   * @param {T[]} [items=[]] - Initial queue items.
+   * @param {number|null} [limit=null] - Maximum allowed items before eviction (null = unlimited).
+   */
+  constructor(items = [], limit = null) {
+    /** @type {T[]} */
+    this._items = Array.isArray(items) ? [...items] : [];
+
+    /** @type {number|null} */
+    this._limit = Number.isInteger(limit) && limit > 0 ? limit : null;
+
+    /** @type {Array<(item: T) => void>} */
     this._evictListeners = [];
+
+    /**
+     * Register a listener that will be called with the evicted item.
+     * @type {(listener: (item: T) => void) => void}
+     */
     this.onEvict = pushTo(this._evictListeners);
   }
 
+  /**
+   * Adds an item to the end of the queue, evicting the head if over limit.
+   * @param {T} item
+   * @returns {T}
+   */
   enqueue(item) {
-    const items = this._items;
-    items.push(item);
-    if (this._limit && items.length > this._limit) this.evict();
+    this._items.push(item);
+    if (this._limit !== null && this._items.length > this._limit) {
+      this.evict();
+    }
     return item;
   }
 
+  /**
+   * Removes the head item and notifies eviction listeners.
+   * @returns {T|undefined}
+   */
   evict() {
     const item = this._items.shift();
-    this._evictListeners.forEach((fn) => fn(item));
+    if (item !== undefined) {
+      this._evictListeners.forEach((fn) => fn(item));
+    }
     return item;
   }
 
+  /**
+   * Removes and returns the first item in the queue.
+   * @returns {T|undefined}
+   */
   dequeue() {
-    if (this.size()) return this._items.splice(0, 1)[0];
+    return this._items.length > 0 ? this._items.shift() : undefined;
   }
 
+  /**
+   * Clears all items from the queue.
+   * @returns {T[]} The previously stored items.
+   */
   clear() {
-    const current = this._items;
-    this._items = [];
-    return current;
+    const cleared = [...this._items];
+    this._items.length = 0;
+    return cleared;
   }
 
+  /**
+   * Returns the current number of items.
+   * @returns {number}
+   */
   size() {
     return this._items.length;
   }
 
+  /**
+   * Removes a specific item from the queue.
+   * @param {T} item
+   * @returns {T|false} The removed item, or false if not found.
+   */
   remove(item) {
-    const idx = this._items.indexOf(item);
-    return idx > -1 && this._items.splice(idx, 1)[0];
+    const index = this._items.indexOf(item);
+    return index !== -1 ? this._items.splice(index, 1)[0] : false;
   }
 
+  /**
+   * Returns the item at the tail (last).
+   * @returns {T|undefined}
+   */
   peekTail() {
     return this._items[this._items.length - 1];
   }
 
+  /**
+   * Returns the item at the head (first).
+   * @returns {T|undefined}
+   */
   peekHead() {
-    if (this.size()) return this._items[0];
+    return this._items[0];
   }
 }

package/src/router/common/queue.spec.js

@@ -0,0 +1,80 @@
+import { Queue } from "./queue.js";
+
+describe("Queue", () => {
+  let queue;
+
+  beforeEach(() => {
+    queue = new Queue();
+  });
+
+  it("should enqueue items", () => {
+    queue.enqueue("a");
+    queue.enqueue("b");
+    expect(queue.size()).toBe(2);
+    expect(queue.peekHead()).toBe("a");
+    expect(queue.peekTail()).toBe("b");
+  });
+
+  it("should dequeue items", () => {
+    queue.enqueue("x");
+    queue.enqueue("y");
+    const item = queue.dequeue();
+    expect(item).toBe("x");
+    expect(queue.size()).toBe(1);
+    expect(queue.peekHead()).toBe("y");
+  });
+
+  it("should evict when over limit", () => {
+    const evicted = [];
+    queue = new Queue([], 2);
+    queue.onEvict((item) => evicted.push(item));
+    queue.enqueue("1");
+    queue.enqueue("2");
+    queue.enqueue("3"); // should evict "1"
+    expect(queue.size()).toBe(2);
+    expect(evicted).toEqual(["1"]);
+    expect(queue.peekHead()).toBe("2");
+  });
+
+  it("should remove specific items", () => {
+    queue.enqueue("a");
+    queue.enqueue("b");
+    queue.enqueue("c");
+    const removed = queue.remove("b");
+    expect(removed).toBe("b");
+    expect(queue.size()).toBe(2);
+    expect(queue._items).toEqual(["a", "c"]);
+  });
+
+  it("should clear the queue", () => {
+    queue.enqueue("foo");
+    queue.enqueue("bar");
+    const cleared = queue.clear();
+    expect(cleared).toEqual(["foo", "bar"]);
+    expect(queue.size()).toBe(0);
+  });
+
+  it("should peek at head and tail", () => {
+    queue.enqueue("first");
+    queue.enqueue("last");
+    expect(queue.peekHead()).toBe("first");
+    expect(queue.peekTail()).toBe("last");
+  });
+
+  it("should return undefined when dequeueing from empty queue", () => {
+    expect(queue.dequeue()).toBeUndefined();
+  });
+
+  it("should return undefined when peeking head in empty queue", () => {
+    expect(queue.peekHead()).toBeUndefined();
+  });
+
+  it("should not evict if limit is not reached", () => {
+    const evicted = [];
+    queue = new Queue([], 3);
+    queue.onEvict((item) => evicted.push(item));
+    queue.enqueue("1");
+    queue.enqueue("2");
+    expect(evicted.length).toBe(0);
+  });
+});

package/src/router/common/trace.js

@@ -39,19 +39,22 @@ import {
   functionToString,
   maxLength,
   padString,
-} from "../../shared/strings";
-function ngViewString(uiview) {
-  if (!uiview) return "ng-view (defunct)";
-  const state = uiview.creationContext
-    ? uiview.creationContext.name || "(root)"
+} from "../../shared/strings.js";
+
+function ngViewString(ngView) {
+  if (!ngView) return "ng-view (defunct)";
+  const state = ngView.creationContext
+    ? ngView.creationContext.name || "(root)"
     : "(none)";
-  return `[ng-view#${uiview.id}:${uiview.fqn} (${uiview.name}@${state})]`;
+  return `[ng-view#${ngView.id}:${ngView.fqn} (${ngView.name}@${state})]`;
 }
+
 const viewConfigString = (viewConfig) => {
   const view = viewConfig.viewDecl;
   const state = view.$context.name || "(root)";
   return `[View#${viewConfig.$id} from '${state}' state]: target ng-view: '${view.$ngViewName}@${view.$ngViewContextAnchor}'`;
 };
+
 function normalizedCat(input) {
   return isNumber(input) ? Category[input] : Category[Category[input]];
 }
@@ -68,15 +71,18 @@ function normalizedCat(input) {
  *
  * `trace.enable(1)`
  */
-var Category;
-(function (Category) {
-  Category[(Category["RESOLVE"] = 0)] = "RESOLVE";
-  Category[(Category["TRANSITION"] = 1)] = "TRANSITION";
-  Category[(Category["HOOK"] = 2)] = "HOOK";
-  Category[(Category["UIVIEW"] = 3)] = "UIVIEW";
-  Category[(Category["VIEWCONFIG"] = 4)] = "VIEWCONFIG";
-})(Category || (Category = {}));
-export { Category };
+
+/**
+ * @enum {number}
+ */
+export const Category = {
+  RESOLVE: 0,
+  TRANSITION: 1,
+  HOOK: 2,
+  UIVIEW: 3,
+  VIEWCONFIG: 4,
+};
+
 const _tid = parse("$id");
 const _rid = parse("router.$id");
 const transLbl = (trans) => `Transition #${_tid(trans)}-${_rid(trans)}`;

package/src/router/directives/component-example.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS</title>
+    <link rel="shortcut icon" type="image/png" href="images/favicon.ico" />
+    <script type="module" src="../../index.js"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        window.angular
+          .module("router", [])
+          .component("hello", {
+            template: "I m greeter",
+          })
+          .config([
+            "$stateProvider",
+            "$locationProvider",
+            ($stateProvider, $locationProvider) => {
+              $locationProvider.html5ModeConf = {
+                enabled: true,
+                requireBase: false,
+                rewriteLinks: false,
+              };
+              $stateProvider.state({
+                name: "home",
+                url: "/src/router/directives/component-example.html",
+                component: "hello",
+              });
+            },
+          ]);
+      });
+    </script>
+  </head>
+  <body ng-app="router">
+    <ng-view></ng-view>
+  </body>
+</html>

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

@@ -137,7 +137,6 @@ export function $StateRefDirective(
         : {};
 
       function update() {
-        // TODO this update used to happen inside a digest watche
         rawDef.ngStateParams = Object.assign({}, scope.$eval(ref.paramExpr));
         const def = getDef();
         if (unlinkInfoFn) {
@@ -184,6 +183,13 @@ $StateRefDynamicDirective.$inject = [
   "$stateRegistry",
   "$transitions",
 ];
+
+/**
+ * @param $state
+ * @param $stateRegistry
+ * @param $transitions
+ * @returns {import("../../interface.ts").Directive}
+ */
 export function $StateRefDynamicDirective(
   $state,
   $stateRegistry,
@@ -221,14 +227,10 @@ export function $StateRefDynamicDirective(
         rawDef[field] = attrs[field] ? scope.$eval(attrs[field]) : null;
         attrs.$observe(field, (expr) => {
           watchDeregFns[field]();
-          watchDeregFns[field] = scope.$watch(
-            expr,
-            (newval) => {
-              rawDef[field] = newval;
-              update();
-            },
-            true,
-          );
+          watchDeregFns[field] = scope.$watch(expr, (newval) => {
+            rawDef[field] = newval;
+            update();
+          });
         });
       });
       update();
@@ -250,13 +252,12 @@ $StateRefActiveDirective.$inject = [
 ];
 
 /**
- *
  * @param {*} $state
- * @param {*} $routerGlobals
+ * @param {import('../globals.js').RouterGlobals} $routerGlobals
  * @param {*} $interpolate
  * @param {*} $stateRegistry
  * @param {*} $transitions
- * @returns {import("../../types").Directive}
+ * @returns {import("../../interface.ts").Directive}
  */
 export function $StateRefActiveDirective(
   $state,

package/src/router/directives/state-directives.spec.js

@@ -145,22 +145,23 @@ describe("ngStateRef", () => {
       expect($stateParams.id).toBeUndefined();
     });
 
-    // TODO investigate further why this fails
-    xit("should not transition states when meta-clicked", async () => {
+    it("should not transition states when meta-clicked", async () => {
+      expect($state.current.name).toEqual("top");
+      await wait();
       el.dispatchEvent(new MouseEvent("click", { metaKey: true }));
-      expect($state.current.name).toEqual("");
+      expect($state.current.name).toEqual("top");
       expect($stateParams.id).toBeUndefined();
     });
 
     it("should not transition states when shift-clicked", async () => {
+      expect($state.current.name).toEqual("top");
       el.dispatchEvent(new MouseEvent("click", { shiftKey: true }));
       expect($state.current.name).toEqual("top");
       expect($stateParams.id).toBeUndefined();
     });
 
-    // TODO investigate further why this fails
-    xit("should not transition states when alt-clicked", async () => {
-      expect($state.current.name).toEqual("");
+    it("should not transition states when alt-clicked", async () => {
+      expect($state.current.name).toEqual("top");
       el.dispatchEvent(new MouseEvent("click", { altKey: true }));
       expect($state.current.name).toEqual("top");
       expect($stateParams.id).toBeUndefined();
@@ -168,13 +169,13 @@ describe("ngStateRef", () => {
 
     it("should not transition states when alt-clicked", async () => {
       expect($state.current.name).toEqual("top");
-
       el.dispatchEvent(new MouseEvent("click", { button: 1 }));
       expect($state.current.name).toEqual("top");
       expect($stateParams.id).toBeUndefined();
     });
 
     it("should not transition states when element has target specified", async () => {
+      expect($state.current.name).toEqual("top");
       el.setAttribute("target", "_blank");
       browserTrigger(el, "click");
       await wait(100);
@@ -183,6 +184,7 @@ describe("ngStateRef", () => {
     });
 
     it("should not transition states if preventDefault() is called in click handler", async () => {
+      expect($state.current.name).toEqual("top");
       expect($stateParams.id).toBeUndefined();
       el.onclick = (e) => e.preventDefault();
 
@@ -192,33 +194,33 @@ describe("ngStateRef", () => {
       expect($stateParams.id).toBeUndefined();
     });
 
-    // // Test for #1031
     it("should allow passing params to current state", async () => {
       $state.go("other", { id: "abc" });
       $rootScope.$index = "def";
       app.innerHTML = '<a ng-sref="{id: $index}">Details</a>';
       $compile(app)($rootScope);
+
       await wait(100);
       expect($state.current.name).toBe("other");
       expect($state.params.id).toEqual("abc");
       expect(app.querySelector("a").getAttribute("href")).toBe("#/other/def");
+      el = app.querySelector("a");
+      browserTrigger(el, "click");
+      await wait(100);
+      expect($state.current.name).toBe("other");
+      expect($state.params.id).toEqual("def");
       //
-      // browserTrigger(el, "click");
-      // await wait(100);
-      // expect($state.current.name).toBe("other");
-      // expect($state.params.id).toEqual("def");
-      //
-      // $rootScope.$index = "ghi";
-      // $state.go("other.detail");
-      // expect($state.current.name).toBe("other.detail");
-      // expect($state.params.id).toEqual("def");
-      //
-      // expect(el.getAttribute("href")).toBe("#/other/ghi/detail");
-      //
-      // browserTrigger(el, "click");
-      // await wait(100);
-      // expect($state.current.name).toBe("other.detail");
-      // expect($state.params.id).toEqual("ghi");
+      $rootScope.$index = "ghi";
+      $state.go("other.detail");
+      await wait(100);
+      expect($state.current.name).toBe("other.detail");
+      expect($state.params.id).toEqual("def");
+      expect(el.getAttribute("href")).toBe("#/other/ghi/detail");
+
+      browserTrigger(el, "click");
+      await wait(100);
+      expect($state.current.name).toBe("other.detail");
+      expect($state.params.id).toEqual("ghi");
     });
 
     it("should allow multi-line attribute values when passing params to current state", async () => {
@@ -407,36 +409,33 @@ describe("ngStateRef", () => {
       expect(template.getAttribute("href")).toBe("#/contacts/22");
     });
 
-    xit("watches attributes", async () => {
-      el = createElementFromHTML(
-        '<a ng-state="{{exprvar}}" ng-state-params="params">state</a>',
-      );
-      template = $compile(el)(scope);
+    it("watches attributes", async () => {
+      app.innerHTML =
+        '<a ng-state="{{exprvar}}" ng-state-params="params">state</a>';
+      template = $compile(app)(scope);
       await wait(100);
       scope.exprvar = "state1";
       scope.state1 = "contacts.item";
       scope.state2 = "other";
       scope.params = { id: 10 };
       await wait(100);
-      expect(template.getAttribute("href")).toBe("#/contacts/10");
-      await wait(100);
+      expect(app.querySelector("a").getAttribute("href")).toBe("#/contacts/10");
+
       scope.exprvar = "state2";
-      expect(template.getAttribute("href")).toBe("#/other/10");
+      await wait(100);
+      expect(app.querySelector("a").getAttribute("href")).toBe("#/other/10");
     });
 
-    xit("accepts option overrides", async () => {
-      let transitionOptions;
-
+    it("accepts option overrides", async () => {
       el = '<a ng-state="state" ng-state-opts="opts">state</a>';
       scope.state = "contacts";
       scope.opts = { reload: true };
       template = $compile(el)(scope);
-      spyOn($state, "go").and.callFake(function (state, params, options) {
-        transitionOptions = options;
-      });
+      spyOn($state, "go").and.callThrough();
 
       browserTrigger(template, "click");
       await wait(100);
+      const transitionOptions = $state.go.calls.all()[0].args[2];
 
       expect(transitionOptions.reload).toEqual(true);
       expect(transitionOptions.absolute).toBeUndefined();
@@ -938,6 +937,7 @@ describe("ngSrefActive", () => {
       url: "/lazy",
       lazyLoad: () => {
         return Promise.resolve().then(() => {
+          debugger;
           _stateProvider
             .state({ name: "contacts.lazy", abstract: true, url: "/lazy" })
             .state({ name: "contacts.lazy.s1", url: "/s1" })
@@ -945,14 +945,20 @@ describe("ngSrefActive", () => {
         });
       },
     });
-    template = $compile(
-      '<div ng-sref-active="active"><a ng-sref="contacts.lazy.s1">Lazy</a></div><div ng-sref-active="active"><a ng-sref="contacts.lazy.s2"></a></div>',
-    )($rootScope);
+
+    app.innerHTML =
+      '<div ng-sref-active="active"><a ng-sref="contacts.lazy.s1">Lazy</a></div><div ng-sref-active="active"><a ng-sref="contacts.lazy.s2"></a></div>';
+    $compile(app)($rootScope);
+    debugger;
     $state.transitionTo("contacts.lazy.s1");
     await wait(100);
 
-    expect(template.classList.contains("active")).toBeTruthy();
-    //expect(template[1].hasClass("active")).toBeFalsy();
+    expect(
+      app.querySelectorAll("a")[0].classList.contains("active"),
+    ).toBeTruthy();
+    expect(
+      app.querySelectorAll("a")[1].classList.contains("active"),
+    ).toBeFalsy();
   });
 
   describe("ng-{class,style} interface", () => {
@@ -1036,7 +1042,7 @@ describe("ngSrefActive", () => {
     });
   });
 
-  xdescribe("ng-{class,style} interface, and handle values as arrays", () => {
+  describe("ng-{class,style} interface, and handle values as arrays", () => {
     it("should match on abstract states that are included by the current state", async () => {
       el = $compile(
         '<div ng-sref-active="{active: [\'randomState.**\', \'admin.roles\']}"><a ng-sref-active="active" ng-sref="admin.roles">Roles</a></div>',
@@ -1078,8 +1084,7 @@ describe("ngSrefActive", () => {
       el = $compile(
         "<div ng-sref-active=\"{active: ['admin.roles', 'admin.someOtherState']}\"/>",
       )($rootScope);
-      timeoutFlush();
-      expect(el.hasClass("active")).toBeTruthy();
+      expect(el.classList.contains("active")).toBeTruthy();
     });
   });
 });

package/src/router/directives/view-directive.js

@@ -9,7 +9,7 @@ import {
 import { parse } from "../../shared/hof.js";
 import { ResolveContext } from "../resolve/resolve-context.js";
 import { trace } from "../common/trace.js";
-import { Ng1ViewConfig } from "../state/views.js";
+import { ViewConfig } from "../state/views.js";
 import {
   dealoc,
   getCacheData,
@@ -26,7 +26,7 @@ import { getLocals } from "../state/state-registry.js";
  * - `name`: (Optional) A view name.
  *   The name should be unique amongst the other views in the same state.
  *   You can have views of the same name that live in different states.
- *   The ng-view can be targeted in a View using the name ([[Ng1StateDeclaration.views]]).
+ *   The ng-view can be targeted in a View using the name ([[StateDeclaration.views]]).
  *
  * - `autoscroll`: an expression. When it evaluates to true, the `ng-view` will be scrolled into view when it is activated.
  *   Uses [[$ngViewScroll]] to do the scrolling.
@@ -57,7 +57,7 @@ import { getLocals } from "../state/state-registry.js";
  * ```
  *
  * The above is a convenient shortcut equivalent to specifying your view explicitly with the
- * [[Ng1StateDeclaration.views]] config property, by name, in this case an empty name:
+ * [[StateDeclaration.views]] config property, by name, in this case an empty name:
  *
  * ```js
  * $stateProvider.state("home", {
@@ -127,7 +127,7 @@ import { getLocals } from "../state/state-registry.js";
  * Resolve data:
  *
  * The resolved data from the state's `resolve` block is placed on the scope as `$resolve` (this
- * can be customized using [[Ng1ViewDeclaration.resolveAs]]).  This can be then accessed from the template.
+ * can be customized using [[ViewDeclaration.resolveAs]]).  This can be then accessed from the template.
  *
  * Note that when `controllerAs` is being used, `$resolve` is set on the controller instance *after* the
  * controller is instantiated.  The `$onInit()` hook can be used to perform initialization code which
@@ -173,7 +173,7 @@ export let ngView = [
       return config1 === config2;
     }
     const rootData = {
-      $cfg: { viewDecl: { $context: $view._pluginapi._rootViewContext() } },
+      $cfg: { viewDecl: { $context: $view.rootViewContext() } },
       $ngView: {},
     };
     const directive = {
@@ -213,7 +213,7 @@ export let ngView = [
           };
           trace.traceUIViewEvent("Linking", activeUIView);
           function configUpdatedCallback(config) {
-            if (config && !(config instanceof Ng1ViewConfig)) return;
+            if (config && !(config instanceof ViewConfig)) return;
             if (configsEqual(viewConfig, config)) return;
             trace.traceUIViewConfigUpdated(
               activeUIView,

package/src/router/directives/view-directive.spec.js

@@ -644,7 +644,7 @@ describe("ngView", () => {
     });
   });
 
-  // describe("AngularJS Animations", () => {
+  // describe("AngularTS Animations", () => {
   //   it("should do transition animations", async () => {
   //     let content = "Initial Content",
   //       animation;

package/src/router/globals.js

@@ -1,12 +1,16 @@
 import { StateParams } from "./params/state-params.js";
 import { Queue } from "./common/queue.js";
+
+/** @typedef {import('../interface.ts').ServiceProvider} ServiceProvider } */
+
 /**
  * Global router state
  *
  * This is where we hold the global mutable state such as current state, current
  * params, current transition, etc.
+ * @implements {ServiceProvider}
  */
-export class UIRouterGlobals {
+export class RouterGlobals {
   constructor() {
     /**
      * Current parameter values
@@ -17,20 +21,35 @@ export class UIRouterGlobals {
     this.params = new StateParams();
 
     /**
-     * @type {Number}
+     * @type {number}
      */
     this.lastStartedTransitionId = -1;
 
     /**
-     * @type {Queue}
+     * @type {Queue<import("./transition/transition.js").Transition>}
      */
     this.transitionHistory = new Queue([], 1);
 
     /**
-     * @type {Queue}
+     * @type {Queue<import("./transition/transition.js").Transition>}
      */
     this.successfulTransitions = new Queue([], 1);
+
+    /**
+     * @type {import("./state/interface.ts").StateDeclaration|undefined}
+     */
+    this.current = undefined;
+
+    /**
+     * @type {import("./state/state-object.js").StateObject|undefined}
+     */
+    this.$current = undefined;
+
+    /**
+     * @type {import("./transition/transition.js").Transition|undefined}
+     */
+    this.transition = undefined;
   }
 
-  $get = [() => this];
+  $get = () => this;
 }