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

package/index.html

@@ -14,10 +14,8 @@
           }
         }
         class TodoController {
-          constructor($element) {
+          constructor() {
             this.greeting = "Todos";
-            this.counter = 123;
-            this.name = "dfsf";
             this.model = {
               name: "John",
               lastName: "Doe",
@@ -26,7 +24,6 @@
               new Todo("Learn AngularTS"),
               new Todo("Build an AngularTS app"),
             ];
-            window.test = this;
           }
 
           get() {
@@ -64,13 +61,7 @@
         window.angular
           .module("todo", [])
           .controller("TodoCtrl", TodoController)
-          .controller("DemoCtrl", Demo)
-          .run(($rootScope) => {
-            $rootScope.model = [
-              { name: "a", item: ["a1", "a2"] },
-              { name: "b", item: ["b1", "b2"] },
-            ];
-          });
+          .controller("DemoCtrl", Demo);
       });
     </script>
   </head>

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@angular-wave/angular.ts",
-  "description": "A modern, optimized and typesafe version of AngularJS",
+  "description": "A modern, optimized and typesafe version of AngularTS",
   "license": "MIT",
-  "version": "0.7.0-beta.0",
+  "version": "0.7.0-beta.1",
   "type": "module",
   "main": "dist/angular-ts.esm.js",
   "module": "dist/angular-ts.esm.js",
@@ -13,7 +13,7 @@
     "url": "https://github.com/Angular-Wave/angular.ts.git"
   },
   "keywords": [
-    "AngularJS",
+    "AngularTS",
     "AngularTS"
   ],
   "engines": {

package/src/angular.spec.js

@@ -3,7 +3,6 @@ import {
   uppercase,
   extend,
   isDefined,
-  merge,
   isDate,
   isRegExp,
   isElement,
@@ -140,103 +139,6 @@ describe("angular", () => {
     });
   });
 
-  describe("merge", () => {
-    it("should recursively copy objects into dst from left to right", () => {
-      const dst = { foo: { bar: "foobar" } };
-      const src1 = { foo: { bazz: "foobazz" } };
-      const src2 = { foo: { bozz: "foobozz" } };
-      merge(dst, src1, src2);
-      expect(dst).toEqual({
-        foo: {
-          bar: "foobar",
-          bazz: "foobazz",
-          bozz: "foobozz",
-        },
-      });
-    });
-
-    it("should replace primitives with objects", () => {
-      const dst = { foo: "bloop" };
-      const src = { foo: { bar: { baz: "bloop" } } };
-      merge(dst, src);
-      expect(dst).toEqual({
-        foo: {
-          bar: {
-            baz: "bloop",
-          },
-        },
-      });
-    });
-
-    it("should replace null values in destination with objects", () => {
-      const dst = { foo: null };
-      const src = { foo: { bar: { baz: "bloop" } } };
-      merge(dst, src);
-      expect(dst).toEqual({
-        foo: {
-          bar: {
-            baz: "bloop",
-          },
-        },
-      });
-    });
-
-    it("should copy references to functions by value rather than merging", () => {
-      function fn() {}
-      const dst = { foo: 1 };
-      const src = { foo: fn };
-      merge(dst, src);
-      expect(dst).toEqual({
-        foo: fn,
-      });
-    });
-
-    it("should create a new array if destination property is a non-object and source property is an array", () => {
-      const dst = { foo: NaN };
-      const src = { foo: [1, 2, 3] };
-      merge(dst, src);
-      expect(dst).toEqual({
-        foo: [1, 2, 3],
-      });
-      expect(dst.foo).not.toBe(src.foo);
-    });
-
-    it("should copy dates by value", () => {
-      const src = { date: new Date() };
-      const dst = {};
-
-      merge(dst, src);
-
-      expect(dst.date).not.toBe(src.date);
-      expect(isDate(dst.date)).toBeTruthy();
-      expect(dst.date.valueOf()).toEqual(src.date.valueOf());
-    });
-
-    it("should copy regexp by value", () => {
-      const src = { regexp: /blah/ };
-      const dst = {};
-
-      merge(dst, src);
-
-      expect(dst.regexp).not.toBe(src.regexp);
-      expect(isRegExp(dst.regexp)).toBe(true);
-      expect(dst.regexp.toString()).toBe(src.regexp.toString());
-    });
-
-    it("should not merge the __proto__ property", () => {
-      const src = JSON.parse('{ "__proto__": { "xxx": "polluted" } }');
-      const dst = {};
-
-      merge(dst, src);
-
-      if (typeof dst.__proto__ !== "undefined") {
-        // Should not overwrite the __proto__ property or pollute the Object prototype
-        expect(dst.__proto__).toBe(Object.prototype);
-      }
-      expect({}.xxx).toBeUndefined();
-    });
-  });
-
   describe("shallow copy", () => {
     it("should make a copy", () => {
       const original = { key: {} };
@@ -761,7 +663,7 @@ describe("angular", () => {
     });
   });
 
-  describe("AngularJS service", () => {
+  describe("AngularTS service", () => {
     it("should override services", () => {
       injector = createInjector([
         function ($provide) {

package/src/animations/animate-children-directive.js

@@ -6,12 +6,12 @@ $$AnimateChildrenDirective.$inject = ["$interpolate"];
 
 /**
  * @param {*} $interpolate
- * @returns {import("../types").Directive}
+ * @returns {import("../interface.ts").Directive}
  */
 export function $$AnimateChildrenDirective($interpolate) {
   return {
     link(scope, element, attrs) {
-      const val = attrs.ngAnimateChildren;
+      const val = attrs["ngAnimateChildren"];
       if (isString(val) && val.length === 0) {
         // empty attribute
         setCacheData(element, NG_ANIMATE_CHILDREN_DATA, true);

package/src/animations/animate-css.md

@@ -17,7 +17,7 @@
 - Once again, `$animateCss` is designed to be used inside of a registered JavaScript animation that
 - is powered by ngAnimate. It is possible to use `$animateCss` directly inside of a directive, however,
 - any automatic control over cancelling animations and/or preventing animations from being run on
-- child elements will not be handled by AngularJS. For this to work as expected, please use `$animate` to
+- child elements will not be handled by AngularTS. For this to work as expected, please use `$animate` to
 - trigger the animation and then setup a JavaScript animation that injects `$animateCss` to trigger
 - the CSS animation.
 -

package/src/animations/animate-queue.js

@@ -770,7 +770,7 @@ export function AnimateQueueProvider($animateProvider) {
 
         while (parentNode) {
           if (!rootNodeDetected) {
-            // AngularJS doesn't want to attempt to animate elements outside of the application
+            // AngularTS doesn't want to attempt to animate elements outside of the application
             // therefore we need to ensure that the rootElement is an ancestor of the current element
             rootNodeDetected = parentNode === rootNode;
           }

package/src/animations/animate-swap.js

@@ -1,6 +1,6 @@
 ngAnimateSwapDirective.$inject = ["$animate"];
 /**
- * @returns {import('../types.js').Directive}
+ * @returns {import('../interface.ts').Directive}
  */
 export function ngAnimateSwapDirective($animate) {
   return {
@@ -12,22 +12,25 @@ export function ngAnimateSwapDirective($animate) {
     link(scope, $element, attrs, ctrl, $transclude) {
       let previousElement;
       let previousScope;
-      scope.$watchCollection(attrs.ngAnimateSwap || attrs.for, (value) => {
-        if (previousElement) {
-          $animate.leave(previousElement);
-        }
-        if (previousScope) {
-          previousScope.$destroy();
-          previousScope = null;
-        }
-        if (value) {
-          $transclude((clone, childScope) => {
-            previousElement = clone;
-            previousScope = childScope;
-            $animate.enter(clone, null, $element);
-          });
-        }
-      });
+      scope.$watchCollection(
+        attrs["ngAnimateSwap"] || attrs["for"],
+        (value) => {
+          if (previousElement) {
+            $animate.leave(previousElement);
+          }
+          if (previousScope) {
+            previousScope.$destroy();
+            previousScope = null;
+          }
+          if (value) {
+            $transclude((clone, childScope) => {
+              previousElement = clone;
+              previousScope = childScope;
+              $animate.enter(clone, null, $element);
+            });
+          }
+        },
+      );
     },
   };
 }

package/src/animations/animate.js

@@ -264,7 +264,7 @@ export function AnimateProvider($provide) {
 
         /**
          *  Associates the provided element with a host parent element to allow the element to be animated even if it exists
-         *  outside of the DOM structure of the AngularJS application. By doing so, any animation triggered via `$animate` can be issued on the
+         *  outside of the DOM structure of the AngularTS application. By doing so, any animation triggered via `$animate` can be issued on the
          *  element despite being outside the realm of the application or within another application. Say for example if the application
          *  was bootstrapped on an element that is somewhere inside of the `<body>` tag, but we wanted to allow for an element to be situated
          *  as a direct child of `document.body`, then this can be achieved by pinning the element via `$animate.pin(element)`. Keep in mind

package/src/animations/animate.md

@@ -5,7 +5,7 @@
 - @description
 -
 - The `ng.animate` module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via
-- callback hooks. Animations are not enabled by default, however, by including `ng.animate` the animation hooks are enabled for an AngularJS app.
+- callback hooks. Animations are not enabled by default, however, by including `ng.animate` the animation hooks are enabled for an AngularTS app.
 -
 - ## Usage
 - Simply put, there are two ways to make use of animations when ng.animate is used: by using **CSS** and **JavaScript**. The former works purely based
@@ -42,7 +42,7 @@
 - ## CSS-based Animations
 -
 - CSS-based animations with ng.animate are unique since they require no JavaScript code at all. By using a CSS class that we reference between our HTML
-- and CSS code we can create an animation that will be picked up by AngularJS when an underlying directive performs an operation.
+- and CSS code we can create an animation that will be picked up by AngularTS when an underlying directive performs an operation.
 -
 - The example below shows how an `enter` animation can be made possible on an element using `ng-if`:
 -
@@ -389,7 +389,7 @@
 -     enter: function(element, doneFn) {
 -       jQuery(element).fadeIn(1000, doneFn);
 -
--       // remember to call doneFn so that AngularJS
+-       // remember to call doneFn so that AngularTS
 -       // knows that the animation has concluded
 -     },
 -
@@ -452,7 +452,7 @@
 -
 - ## CSS + JS Animations Together
 -
-- AngularJS 1.4 and higher has taken steps to make the amalgamation of CSS and JS animations more flexible. However, unlike earlier versions of AngularJS,
+- AngularTS 1.4 and higher has taken steps to make the amalgamation of CSS and JS animations more flexible. However, unlike earlier versions of AngularTS,
 - defining CSS and JS animations to work off of the same CSS class will not work anymore. Therefore the example below will only result in \*\*JS animations taking
 - charge of the animation\*\*:
 -
@@ -575,7 +575,7 @@
 -
 - ## Animation Anchoring (via `ng-animate-ref`)
 -
-- ng.animate in AngularJS 1.4 comes packed with the ability to cross-animate elements between
+- ng.animate in AngularTS 1.4 comes packed with the ability to cross-animate elements between
 - structural areas of an application (like views) by pairing up elements using an attribute
 - called `ng-animate-ref`.
 -
@@ -829,7 +829,7 @@
 -
 - ## Using $animate in your directive code
 -
-- So far we've explored how to feed in animations into an AngularJS application, but how do we trigger animations within our own directives in our application?
+- So far we've explored how to feed in animations into an AngularTS application, but how do we trigger animations within our own directives in our application?
 - By injecting the `$animate` service into our directive code, we can trigger structural and class-based hooks which can then be consumed by animations. Let's
 - imagine we have a greeting box that shows and hides itself when the data changes
 -
@@ -896,7 +896,7 @@
   ```
 
 -
-- (Note that earlier versions of AngularJS prior to v1.4 required the promise code to be wrapped using `$scope.$apply(...)`. This is not the case
+- (Note that earlier versions of AngularTS prior to v1.4 required the promise code to be wrapped using `$scope.$apply(...)`. This is not the case
 - anymore.)
 -
 - In addition to the animation promise, we can also make use of animation-related callbacks within our directives and controller code by registering
@@ -917,7 +917,7 @@
   ```
 
 -
-- (Note that you will need to trigger a digest within the callback to get AngularJS to notice any scope-related changes.)
+- (Note that you will need to trigger a digest within the callback to get AngularTS to notice any scope-related changes.)
   \*/
 
 /\*\*

package/src/animations/animation.js

@@ -322,6 +322,7 @@ export function AnimationProvider() {
               }
             }
           }
+          // @ts-ignore
           $$rAFScheduler(finalAnimations);
         });
 

package/src/animations/interface.ts

@@ -0,0 +1,19 @@
+export type RafScheduler = {
+  /**
+   * Schedules a list of functions to run on the next animation frame(s).
+   * @param tasks - The tasks to be scheduled.
+   */
+  (tasks: Array<() => void>): void;
+
+  /**
+   * Internal queue of scheduled task arrays.
+   */
+  queue: Array<Array<() => void>>;
+
+  /**
+   * Waits until the animation frame is quiet before running the provided function.
+   * Cancels any previous animation frame requests.
+   * @param fn - The function to run when the frame is quiet.
+   */
+  waitUntilQuiet(fn: () => void): void;
+};

package/src/animations/raf-scheduler.js

@@ -1,76 +1,92 @@
 /**
- * @typedef {Function} RafSchedulerFunction
- * @typedef {Object} RafSchedulerObject
- * @property {Function} waitUntilQuiet - Function to wait until the animation frame is quiet.
- * @typedef {RafSchedulerObject & RafSchedulerFunction} RafScheduler
+ * @typedef {import('./interface.js').RafScheduler} RafScheduler
+ * @typedef {import('../interface.js').ServiceProvider} ServiceProvider
  */
 
 /**
- * Creates a requestAnimationFrame scheduler.
+ * Service provider that creates a requestAnimationFrame-based scheduler.
+ * @implements {ServiceProvider}
  */
-export function RafSchedulerProvider() {
-  /**
-   * @type {Array<Array<Function>>}
-   */
-  let queue = [];
-  /**
-   * @type {number|null}
-   */
-  let cancelFn = null;
+export class RafSchedulerProvider {
+  constructor() {
+    /**
+     * Internal task queue, where each item is an array of functions to run.
+     * @type {Array<Array<() => void>>}
+     */
+    this.queue = [];
+
+    /**
+     * ID of the currently scheduled animation frame (if any).
+     * Used for cancellation and tracking.
+     * @type {number|null}
+     */
+    this.cancelFn = null;
+  }
 
   /**
-   * Processes the next tick of the animation frame.
+   * Processes the next batch of tasks in the animation frame.
+   * Executes the first group of functions in the queue, then
+   * schedules the next frame if needed.
    */
-  function nextTick() {
-    if (!queue.length) return;
+  nextTick() {
+    if (!this.queue.length) return;
 
-    const items = queue.shift();
-    items.forEach((i) => i());
+    const items = this.queue.shift();
+    items.forEach((fn) => fn());
 
-    if (!cancelFn) {
-      window.requestAnimationFrame(() => {
-        cancelFn = null;
-        nextTick();
+    if (!this.cancelFn) {
+      this.cancelFn = window.requestAnimationFrame(() => {
+        this.cancelFn = null;
+        this.nextTick();
       });
     }
   }
 
   /**
-   * Adds tasks to the queue and schedules the next tick.
-   * @param {Array<Function>} tasks - The tasks to be added to the queue.
+   * Returns the scheduler function.
+   * This function allows tasks to be queued for execution on future animation frames.
+   * It also has helper methods and state attached.
+   *
+   * @returns {RafScheduler} The scheduler function with `queue` and `waitUntilQuiet`.
    */
-  function scheduler(tasks) {
-    // Make a copy since RAFScheduler mutates the state
-    // of the passed in array variable and this would be difficult
-    // to track down on the outside code
-    queue = queue.concat(tasks);
-    nextTick();
-  }
+  $get() {
+    /**
+     * The main scheduler function.
+     * Accepts an array of functions and schedules them to run in the next available frame(s).
+     *
+     * @type {RafScheduler}
+     */
+    const scheduler = (tasks) => {
+      // Clone the input array to avoid mutating the original.
+      this.queue = this.queue.concat(tasks);
+      this.nextTick();
+    };
 
-  queue = scheduler.queue = [];
+    /**
+     * Exposes the internal queue to consumers (read-only use preferred).
+     * This matches the type signature for RafScheduler.
+     */
+    scheduler.queue = this.queue;
 
-  /**
-   * Waits until the animation frame is quiet before running the provided function.
-   * Cancels any previous animation frame requests.
-   * @param {Function} fn - The function to run when the animation frame is quiet.
-   */
-  scheduler.waitUntilQuiet = (fn) => {
-    if (cancelFn !== null) {
-      window.cancelAnimationFrame(cancelFn);
-      cancelFn = null;
-    }
+    /**
+     * Cancels any pending frame and runs the given function once the frame is idle.
+     * Useful for debounced updates.
+     *
+     * @param {Function} fn - Function to run when the animation frame is quiet.
+     */
+    scheduler.waitUntilQuiet = (fn) => {
+      if (this.cancelFn !== null) {
+        window.cancelAnimationFrame(this.cancelFn);
+        this.cancelFn = null;
+      }
 
-    cancelFn = window.requestAnimationFrame(() => {
-      cancelFn = null;
-      fn();
-      nextTick();
-    });
-  };
+      this.cancelFn = window.requestAnimationFrame(() => {
+        this.cancelFn = null;
+        fn();
+        this.nextTick();
+      });
+    };
 
-  /**
-   * @returns {RafScheduler} The scheduler object.
-   */
-  this.$get = function () {
     return scheduler;
-  };
+  }
 }

package/src/animations/raf-scheduler.spec.js

@@ -35,6 +35,12 @@ describe("RafSchedulerProvider", function () {
     callbacks.forEach((cb) => cb && cb());
   }
 
+  it("can be instatiated", () => {
+    const ref = new RafSchedulerProvider();
+    expect(ref).toBeDefined();
+    expect(ref.queue.length).toEqual(0);
+  });
+
   it("should schedule tasks and process them", function () {
     const task1 = jasmine.createSpy("task1");
     const task2 = jasmine.createSpy("task2");

package/src/core/compile/attributes.js

@@ -9,6 +9,7 @@ import {
   directiveNormalize,
   hasAnimate,
   isProxy,
+  hasOwn,
 } from "../../shared/utils.js";
 import { ALIASED_ATTR } from "../../shared/constants.js";
 
@@ -183,7 +184,7 @@ export class Attributes {
         //
       } else if (SIMPLE_ATTR_NAME.test(attrName)) {
         // jQuery skips special boolean attrs treatment in XML nodes for
-        // historical reasons and hence AngularJS cannot freely call
+        // historical reasons and hence AngularTS cannot freely call
         // `.getAttribute(attrName, false) with such attributes. To avoid issues
         // in XHTML, call `removeAttr` in such cases instead.
         // See https://github.com/jquery/jquery/issues/4249
@@ -234,11 +235,7 @@ export class Attributes {
     const listeners = $$observers[key] || ($$observers[key] = []);
 
     listeners.push(fn);
-    if (
-      !listeners.$$inter &&
-      Object.prototype.hasOwnProperty.call(this, key) &&
-      !isUndefined(this[key])
-    ) {
+    if (!listeners.$$inter && hasOwn(this, key) && !isUndefined(this[key])) {
       // no one registered attribute interpolation function, so lets call it manually
       fn(this[key]);
     }
@@ -264,6 +261,7 @@ export class Attributes {
   }
 
   sanitizeSrcset(value, invokeType) {
+    let i;
     if (!value) {
       return value;
     }
@@ -284,21 +282,21 @@ export class Attributes {
     // `$sce.trustAsHtml` on the whole `img` tag and inject it into the DOM using the
     // `ng-bind-html` directive.
 
-    var result = "";
+    let result = "";
 
     // first check if there are spaces because it's not the same pattern
-    var trimmedSrcset = trim(value);
+    const trimmedSrcset = trim(value);
     //                (   999x   ,|   999w   ,|   ,|,   )
-    var srcPattern = /(\s+\d+x\s*,|\s+\d+w\s*,|\s+,|,\s+)/;
-    var pattern = /\s/.test(trimmedSrcset) ? srcPattern : /(,)/;
+    const srcPattern = /(\s+\d+x\s*,|\s+\d+w\s*,|\s+,|,\s+)/;
+    const pattern = /\s/.test(trimmedSrcset) ? srcPattern : /(,)/;
 
     // split srcset into tuple of uri and descriptor except for the last item
-    var rawUris = trimmedSrcset.split(pattern);
+    const rawUris = trimmedSrcset.split(pattern);
 
     // for each tuples
-    var nbrUrisWith2parts = Math.floor(rawUris.length / 2);
-    for (var i = 0; i < nbrUrisWith2parts; i++) {
-      var innerIdx = i * 2;
+    const nbrUrisWith2parts = Math.floor(rawUris.length / 2);
+    for (i = 0; i < nbrUrisWith2parts; i++) {
+      const innerIdx = i * 2;
       // sanitize the uri
       result += this.$sce.getTrustedMediaUrl(trim(rawUris[innerIdx]));
       // add the descriptor
@@ -306,7 +304,7 @@ export class Attributes {
     }
 
     // split the last item into uri and descriptor
-    var lastTuple = trim(rawUris[i * 2]).split(/\s/);
+    const lastTuple = trim(rawUris[i * 2]).split(/\s/);
 
     // sanitize the last uri
     result += this.$sce.getTrustedMediaUrl(trim(lastTuple[0]));