npm - @angular-wave/angular.ts - Versions diffs - 0.7.0-beta.0 → 0.7.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1095) hide show

package/docs/package.json CHANGED Viewed

@@ -1,14 +1,14 @@
 {
   "name": "docsy-example-site",
-  "version": "0.10.0",
-  "version.next": "0.10.1-dev.0-unreleased",
+  "version": "0.12.0",
+  "version.next": "0.12.1-dev-unreleased",
   "description": "Example site that uses Docsy theme for technical documentation.",
   "repository": "github:google/docsy-example",
   "homepage": "https://example.docsy.dev",
   "author": "Docsy Authors",
   "license": "Apache-2.0",
   "bugs": "https://github.com/google/docsy-example/issues",
-  "spelling": "cSpell:ignore HTMLTEST precheck postbuild -",
+  "spelling": "cSpell:ignore docsy hugo htmltest precheck postbuild rtlcss -",
   "scripts": {
     "_build": "npm run _hugo-dev --",
     "_check:links": "echo IMPLEMENTATION PENDING for check-links; echo",
@@ -31,12 +31,23 @@
     "serve": "npm run _serve",
     "test": "npm run check:links",
     "update:dep": "npm install --save-dev autoprefixer@latest postcss-cli@latest",
-    "update:hugo": "npm install --save-dev --save-exact hugo-extended@latest"
+    "update:hugo": "npm install --save-dev --save-exact hugo-extended@latest",
+    "update:pkgs": "npx npm-check-updates -u"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.21",
     "cross-env": "^7.0.3",
-    "hugo-extended": "0.126.1",
-    "postcss-cli": "^11.0.0"
+    "hugo-extended": "0.147.8",
+    "postcss": "^8.4.38",
+    "postcss-cli": "^11.0.1",
+    "rtlcss": "^4.3.0"
+  },
+  "optionalDependencies": {
+    "npm-check-updates": "^18.0.1"
+  },
+  "private": true,
+  "prettier": {
+    "proseWrap": "always",
+    "singleQuote": true
   }
 }

package/index.html CHANGED Viewed

@@ -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,17 +61,11 @@
         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>
-  <body ng-app="todo" ng-init="hide = false">
+  <body ng-app="todo">
     <div ng-controller="TodoCtrl as $ctrl">
       <h3>Todos</h3>
       <button ng-click="$ctrl.archive()">Archive</button>

package/package.json CHANGED Viewed

@@ -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.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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,17 +1,18 @@
 import { isString } from "../shared/utils.js";
 import { NG_ANIMATE_CHILDREN_DATA } from "./shared.js";
 import { setCacheData } from "../shared/dom.js";
+import { $injectTokens } from "../injection-tokens.js";
-$$AnimateChildrenDirective.$inject = ["$interpolate"];
+$$AnimateChildrenDirective.$inject = [$injectTokens.$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.js CHANGED Viewed

@@ -267,6 +267,7 @@ export function AnimateCssProvider() {
         // all of the animation functions should create
         // a copy of the options data, however, if a
         // parent service has already created a copy then
+        let delayStyle;
         // we should stick to using that
         let options = initialOptions || {};
         if (!options.$$prepared) {
@@ -479,13 +480,12 @@ export function AnimateCssProvider() {
           return closeAndReturnNoopAnimator();
         }
-        var activeClasses = pendClasses(
+        let activeClasses = pendClasses(
           preparationClasses,
           ACTIVE_CLASS_SUFFIX,
         );
         if (options.delay != null) {
-          var delayStyle;
           if (typeof options.delay !== "boolean") {
             delayStyle = parseFloat(options.delay);
             // number in options.delay means we have to recalculate the delay for the closing timeout

package/src/animations/animate-css.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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-runner.js CHANGED Viewed

@@ -1,13 +1,13 @@
 export function AnimateAsyncRunFactoryProvider() {
   this.$get = [
     function () {
-      var waitQueue = [];
+      let waitQueue = [];
       function waitForTick(fn) {
         waitQueue.push(fn);
         if (waitQueue.length > 1) return;
         window.requestAnimationFrame(function () {
-          for (var i = 0; i < waitQueue.length; i++) {
+          for (let i = 0; i < waitQueue.length; i++) {
             waitQueue[i]();
           }
           waitQueue = [];
@@ -15,7 +15,7 @@ export function AnimateAsyncRunFactoryProvider() {
       }
       return function () {
-        var passed = false;
+        let passed = false;
         waitForTick(function () {
           passed = true;
         });

package/src/animations/animate-swap.js CHANGED Viewed

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

package/src/animations/animate.js CHANGED Viewed

@@ -35,6 +35,8 @@ function prepareAnimateOptions(options) {
 }
 AnimateProvider.$inject = ["$provide"];
+/** @param {import('../interface.ts').Provider} $provide */
 export function AnimateProvider($provide) {
   const provider = this;
   let classNameFilter = null;
@@ -74,7 +76,7 @@ export function AnimateProvider($provide) {
    * ```
    *
    * @param {string} name The name of the animation (this is what the class-based CSS value will be compared to).
-   * @param {Function} factory The factory function that will be executed to return the animation
+   * @param {import("../interface.ts").Injectable} factory The factory function that will be executed to return the animation
    *                           object.
    */
   this.register = function (name, factory) {
@@ -264,7 +266,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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/animations/interface.ts ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/animations/shared.js CHANGED Viewed

@@ -256,7 +256,7 @@ export function resolveElementClasses(existing, toAdd, toRemove) {
   };
   Object.entries(flags).forEach(([klass, val]) => {
-    var prop, allow;
+    let prop, allow;
     if (val === ADD_CLASS) {
       prop = "addClass";
       allow = !existing[klass] || existing[klass + REMOVE_CLASS_SUFFIX];