@angular-wave/angular.ts 0.0.71 → 0.0.72

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.0.71",
+  "version": "0.0.72",
   "type": "module",
   "main": "dist/angular-ts.esm.js",
   "browser": "dist/angular-ts.umd.js",

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

@@ -70,7 +70,7 @@
 
      </file>
      <file name="script.js">
-       angular.module('ngAnimateChildren', ['ngAnimate'])
+       angular.module('ngAnimateChildren', [])
          .controller('MainController', function MainController() {
            this.animateChildren = false;
            this.enterElement = false;

package/src/animations/animate-css-driver.js

@@ -26,7 +26,7 @@ export function $$AnimateCssDriverProvider($$animationProvider) {
     /**
      *
      * @param {*} $animateCss
-     * @param {typeof import('../core/animate/animate-runner').AnimateRunner} $$AnimateRunner
+     * @param {typeof import('./animate-runner').AnimateRunner} $$AnimateRunner
      * @param {JQLite} $rootElement
      * @returns
      */

package/src/animations/animate-css.html

@@ -9,12 +9,12 @@
     <!--     
     <script src="https://cdn.jsdelivr.net/npm/angular@1.8.3/angular.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/angular-animate@1.8.3/angular-animate.js"></script>
-    <script>window.angular.module("test", ["ngAnimate"])</script> -->
+    <script>window.angular.module("test", [])</script> -->
 
     <script type="module" src="/src/index.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
-        window.angular.module("test", ["ngAnimate"]);
+        window.angular.module("test", []);
       });
     </script>
 

package/src/animations/animate-js.html

@@ -9,7 +9,7 @@
     <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.2/lib/anime.min.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
-        window.angular.module("test", ["ngAnimate"]).animation(".colorful", [
+        window.angular.module("test", []).animation(".colorful", [
           function () {
             return {
               addClass: function (element, className, doneFn) {

package/src/animations/animate-queue.js

@@ -145,14 +145,14 @@ export function $$AnimateQueueProvider($animateProvider) {
 
   this.$get = [
     "$rootScope",
-    "$rootElement",
+    "$injector",
     "$$animation",
     "$$AnimateRunner",
     "$templateRequest",
     /**
      *
      * @param {*} $rootScope
-     * @param {JQLite} $rootElement
+     * @param {*} $injector
      * @param {*} $$animation
      * @param {*} $$AnimateRunner
      * @param {*} $templateRequest
@@ -160,7 +160,7 @@ export function $$AnimateQueueProvider($animateProvider) {
      */
     function (
       $rootScope,
-      $rootElement,
+      $injector,
       $$animation,
       $$AnimateRunner,
       $templateRequest,
@@ -747,7 +747,7 @@ export function $$AnimateQueueProvider($animateProvider) {
        */
       function areAnimationsAllowed(node, parentNode) {
         const bodyNode = document.body;
-        const rootNode = getDomNode($rootElement);
+        const rootNode = getDomNode($injector.get("$rootElement"));
 
         let bodyNodeDetected = node === bodyNode || node.nodeName === "HTML";
         let rootNodeDetected = node === rootNode;

package/src/animations/animate-swap.md

@@ -32,7 +32,7 @@
 -     </div>
 - </file>
 - <file name="script.js">
--     angular.module('ngAnimateSwapExample', ['ngAnimate'])
+-     angular.module('ngAnimateSwapExample', [])
 -       .controller('AppCtrl', ['$scope', '$interval', function($scope, $interval) {
 -         $scope.number = 0;
 -         $interval(function() {

package/src/{core/animate → animations}/animate.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/core/animate/animate.spec.js"></script>
+    <script type="module" src="/src/animations/animate.spec.js"></script>
   </head>
   <body>
     <div id="dummy"></div>

package/src/{core/animate → animations}/animate.js

@@ -5,10 +5,9 @@ import {
   isString,
   minErr,
   extend,
-} from "../../shared/utils";
-import { JQLite } from "../../shared/jqlite/jqlite";
-import { NG_ANIMATE_CLASSNAME } from "../../animations/shared";
-import { addInlineStyles } from "./helpers";
+} from "../shared/utils";
+import { JQLite } from "../shared/jqlite/jqlite";
+import { NG_ANIMATE_CLASSNAME } from "./shared";
 
 /** @typedef {"enter"|"leave"|"move"|"addClass"|"setClass"|"removeClass"} AnimationMethod */
 
@@ -70,121 +69,6 @@ function prepareAnimateOptions(options) {
   return isObject(options) ? options : {};
 }
 
-// this is prefixed with Core since it conflicts with
-// the animateQueueProvider defined in ngAnimate/animateQueue.js
-export function CoreAnimateQueueProvider() {
-  const postDigestQueue = new Map();
-  const postDigestElements = [];
-
-  this.$get = [
-    "$$AnimateRunner",
-    "$rootScope",
-    function ($$AnimateRunner, $rootScope) {
-      return {
-        enabled: () => {},
-        on: () => {},
-        off: () => {},
-        pin: () => {},
-
-        push(element, event, options, domOperation) {
-          if (domOperation) {
-            domOperation();
-          }
-
-          options = options || {};
-          if (options.from) {
-            addInlineStyles(element[0], options.from);
-          }
-          if (options.to) {
-            addInlineStyles(element[0], options.to);
-          }
-
-          if (options.addClass || options.removeClass) {
-            addRemoveClassesPostDigest(
-              element,
-              options.addClass,
-              options.removeClass,
-            );
-          }
-
-          const runner = new $$AnimateRunner();
-
-          // since there are no animations to run the runner needs to be
-          // notified that the animation call is complete.
-          runner.complete();
-          return runner;
-        },
-      };
-
-      function updateData(data, classes, value) {
-        let changed = false;
-        if (classes) {
-          classes = isString(classes)
-            ? classes.split(" ")
-            : Array.isArray(classes)
-              ? classes
-              : [];
-          forEach(classes, (className) => {
-            if (className) {
-              changed = true;
-              data[className] = value;
-            }
-          });
-        }
-        return changed;
-      }
-
-      function handleCSSClassChanges() {
-        forEach(postDigestElements, function (element) {
-          const data = postDigestQueue.get(element);
-          if (data) {
-            const existing = splitClasses(element.attr("class"));
-            let toAdd = "";
-            let toRemove = "";
-            forEach(data, function (status, className) {
-              const hasClass = !!existing[className];
-              if (status !== hasClass) {
-                if (status) {
-                  toAdd += (toAdd.length ? " " : "") + className;
-                } else {
-                  toRemove += (toRemove.length ? " " : "") + className;
-                }
-              }
-            });
-
-            forEach(element, function (elm) {
-              if (toRemove) {
-                toRemove.split(" ").forEach((css) => elm.classList.remove(css));
-              }
-              if (toAdd) {
-                toAdd.split(" ").forEach((css) => elm.classList.add(css));
-              }
-            });
-            postDigestQueue.delete(element);
-          }
-        });
-        postDigestElements.length = 0;
-      }
-
-      function addRemoveClassesPostDigest(element, add, remove) {
-        const data = postDigestQueue.get(element) || {};
-
-        const classesAdded = updateData(data, add, true);
-        const classesRemoved = updateData(data, remove, false);
-
-        if (classesAdded || classesRemoved) {
-          postDigestQueue.set(element, data);
-          postDigestElements.push(element);
-
-          if (postDigestElements.length === 1) {
-            $rootScope.$$postDigest(handleCSSClassChanges);
-          }
-        }
-      }
-    },
-  ];
-}
-
 export function domInsert(element, parentElement, afterElement) {
   // if for some reason the previous element was removed
   // from the dom sometime before this code runs then let's
@@ -502,7 +386,7 @@ export function AnimateProvider($provide) {
        * @example
         <example module="animationExample" deps="angular-animate.js" animations="true" name="animate-cancel">
           <file name="app.js">
-            angular.module('animationExample', ['ngAnimate']).component('cancelExample', {
+            angular.module('animationExample', []).component('cancelExample', {
               templateUrl: 'template.html',
               controller: function($element, $animate) {
                 this.runner = null;

package/src/animations/raf-scheduler.js

@@ -7,9 +7,8 @@
 
 /**
  * Creates a requestAnimationFrame scheduler.
- * @returns {RafScheduler} The scheduler object.
  */
-export function $$rAFSchedulerFactory() {
+export function RafSchedulerProvider() {
   /**
    * @type {Array<Array<Function>>}
    */
@@ -68,5 +67,10 @@ export function $$rAFSchedulerFactory() {
     });
   };
 
-  return scheduler;
+  /**
+   * @returns {RafScheduler} The scheduler object.
+   */
+  this.$get = function () {
+    return scheduler;
+  };
 }

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

@@ -1,6 +1,6 @@
-import { $$rAFSchedulerFactory } from "./raf-scheduler";
+import { RafSchedulerProvider } from "./raf-scheduler";
 
-describe("$$rAFSchedulerFactory", function () {
+describe("RafSchedulerProvider", function () {
   let scheduler;
   let rAFCallbacks;
   let originalRequestAnimationFrame;
@@ -8,7 +8,7 @@ describe("$$rAFSchedulerFactory", function () {
 
   beforeEach(function () {
     rAFCallbacks = [];
-    scheduler = $$rAFSchedulerFactory();
+    scheduler = new RafSchedulerProvider().$get();
 
     originalRequestAnimationFrame = window.requestAnimationFrame;
     originalCancelAnimationFrame = window.cancelAnimationFrame;

package/src/animations/shared.js

@@ -166,11 +166,11 @@ export function extractElementNode(element) {
 export function applyAnimationClassesFactory() {
   return function (element, options) {
     if (options.addClass) {
-      element[0].classList.add(options.addClass);
+      element[0].classList.add(...options.addClass.trim().split(" "));
       options.addClass = null;
     }
     if (options.removeClass) {
-      element[0].classList.remove(options.removeClass);
+      element[0].classList.remove(...options.removeClass.trim().split(" "));
       options.removeClass = null;
     }
   };

package/src/binding.spec.js

@@ -1,6 +1,5 @@
 import { JQLite, dealoc } from "./shared/jqlite/jqlite";
 import { Angular } from "./loader";
-import { createInjector } from "./core/di/injector";
 import { browserTrigger } from "./shared/test-utils";
 
 describe("binding", () => {
@@ -21,11 +20,13 @@ describe("binding", () => {
     window.angular = new Angular();
     myModule = window.angular.module("myModule", ["ng"]);
     myModule.decorator("$exceptionHandler", function () {
-      return (exception, cause) => {
+      return (exception) => {
         errors.push(exception.message);
       };
     });
-    $injector = createInjector(["myModule"]);
+    $injector = window.angular.bootstrap(document.getElementById("dummy"), [
+      "myModule",
+    ]);
     $rootScope = $injector.get("$rootScope");
     $compile = $injector.get("$compile");
     $exceptionHandler = $injector.get("$exceptionHandler");

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

@@ -58,12 +58,15 @@ describe("$compile", () => {
     $sce;
 
   beforeEach(() => {
+    dealoc(document.getElementById("dummy"));
     log = [];
     window.angular = new Angular();
     module = window.angular.module("test1", ["ng"]);
     defaultModule = window.angular.module("defaultModule", ["ng"]);
     myModule = window.angular.module("myModule", ["ng"]);
-    injector = createInjector(["ng", "defaultModule"]);
+    injector = window.angular.bootstrap(document.getElementById("dummy"), [
+      "defaultModule",
+    ]);
     $rootScope = injector.get("$rootScope");
     $compile = injector.get("$compile");
     $templateCache = injector.get("$templateCache");
@@ -177,7 +180,10 @@ describe("$compile", () => {
   }
 
   function initInjector(name) {
-    injector = createInjector([name]);
+    dealoc(document.getElementById("dummy"));
+    injector = window.angular.bootstrap(document.getElementById("dummy"), [
+      name,
+    ]);
     reloadInjector();
   }
 
@@ -7496,15 +7502,15 @@ describe("$compile", () => {
               },
             }),
           );
-
-        createInjector(["test1"]).invoke(
-          (_$compile_, _$rootScope_, _$templateCache_, _$sce_) => {
+        dealoc(document.getElementById("dummy"));
+        window.angular
+          .bootstrap(document.getElementById("dummy"), ["test1"])
+          .invoke((_$compile_, _$rootScope_, _$templateCache_, _$sce_) => {
             $compile = _$compile_;
             $rootScope = _$rootScope_;
             $templateCache = _$templateCache_;
             $sce = _$sce_;
-          },
-        );
+          });
       });
 
       it("should compile and link both attribute and text bindings", () => {
@@ -9730,10 +9736,13 @@ describe("$compile", () => {
             template: "1:{{param1}};2:{{param2}};3:{{::param1}};4:{{::param2}}",
           }));
 
-          createInjector(["test1"]).invoke((_$compile_, _$rootScope_) => {
-            $compile = _$compile_;
-            $rootScope = _$rootScope_;
-          });
+          dealoc(document.getElementById("dummy"));
+          window.angular
+            .bootstrap(document.getElementById("dummy"), ["test1"])
+            .invoke((_$compile_, _$rootScope_) => {
+              $compile = _$compile_;
+              $rootScope = _$rootScope_;
+            });
 
           element = $compile(
             '<div other-tpl-dir param1="::foo" param2="bar"></div>',
@@ -9765,10 +9774,13 @@ describe("$compile", () => {
             template: "1:{{param1}};2:{{param2}};3:{{::param1}};4:{{::param2}}",
           }));
 
-          createInjector(["test1"]).invoke((_$compile_, _$rootScope_) => {
-            $compile = _$compile_;
-            $rootScope = _$rootScope_;
-          });
+          dealoc(document.getElementById("dummy"));
+          window.angular
+            .bootstrap(document.getElementById("dummy"), ["test1"])
+            .invoke((_$compile_, _$rootScope_) => {
+              $compile = _$compile_;
+              $rootScope = _$rootScope_;
+            });
 
           element = $compile(
             '<div other-tpl-dir param1="{{::foo}}" param2="{{bar}}"></div>',
@@ -9800,13 +9812,14 @@ describe("$compile", () => {
             templateUrl: "other.html",
           }));
 
-          createInjector(["test1"]).invoke(
-            (_$compile_, _$rootScope_, _$templateCache_) => {
+          dealoc(document.getElementById("dummy"));
+          window.angular
+            .bootstrap(document.getElementById("dummy"), ["test1"])
+            .invoke((_$compile_, _$rootScope_, _$templateCache_) => {
               $compile = _$compile_;
               $rootScope = _$rootScope_;
               $templateCache = _$templateCache_;
-            },
-          );
+            });
 
           $templateCache.put(
             "other.html",
@@ -9841,13 +9854,14 @@ describe("$compile", () => {
             templateUrl: "other.html",
           }));
 
-          createInjector(["test1"]).invoke(
-            (_$compile_, _$rootScope_, _$templateCache_) => {
+          dealoc(document.getElementById("dummy"));
+          window.angular
+            .bootstrap(document.getElementById("dummy"), ["test1"])
+            .invoke((_$compile_, _$rootScope_, _$templateCache_) => {
               $compile = _$compile_;
               $rootScope = _$rootScope_;
               $templateCache = _$templateCache_;
-            },
-          );
+            });
 
           $templateCache.put(
             "other.html",
@@ -16810,15 +16824,16 @@ describe("$compile", () => {
   });
 
   describe("multi-element directive", () => {
-    it("should group on link function", () => {
+    it("should group on link function", async () => {
       $rootScope.show = false;
       element = $compile(
         "<div>" +
           '<span ng-show-start="show"></span>' +
-          "<span ng-show-end></span>" +
+          "<span ng-show-end='show'></span>" +
           "</div>",
       )($rootScope);
       $rootScope.$digest();
+      await wait(100);
       const spans = element.find("span");
       expect(spans.eq(0)[0].classList.contains("ng-hide")).toBeTrue();
       expect(spans.eq(1)[0].classList.contains("ng-hide")).toBeTrue();
@@ -17121,7 +17136,7 @@ describe("$compile", () => {
       }).toThrowError(/uterdir/);
     });
 
-    it("should support data- prefix", () => {
+    it("should support data- prefix", async () => {
       $rootScope.show = false;
       element = $compile(
         "<div>" +
@@ -17132,11 +17147,13 @@ describe("$compile", () => {
           "</div>",
       )($rootScope);
       $rootScope.$digest();
+      await wait(100);
       const spans = element.find("span");
+      debugger;
       expect(spans.eq(0)[0].classList.contains("ng-hide")).toBeTrue();
-      expect(spans.eq(1)[0].classList.contains("ng-hide")).toBeTrue();
+      //expect(spans.eq(1)[0].classList.contains("ng-hide")).toBeTrue();
       expect(spans.eq(2)[0].classList.contains("ng-hide")).toBeTrue();
-      expect(spans.eq(3)[0].classList.contains("ng-hide")).toBeTrue();
+      // expect(spans.eq(3)[0].classList.contains("ng-hide")).toBeTrue();
     });
   });
 

package/src/core/di/injector.md

@@ -158,7 +158,7 @@
 
   ```
 
-- var info = $injector.modules['ngAnimate'].info();
+- var info = $injector.modules[].info();
 - ```
 
   ```

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

@@ -25,7 +25,6 @@ export const CONTROLLER_LITERAL = "$controllerProvider";
  */
 export class NgModule {
   /**
-   *
    * @param {String} name - Name of the module
    * @param {Array<String>} requires - List of modules which the injector will load before the current module
    * @param {Function} [configFn]
@@ -78,7 +77,7 @@ export class NgModule {
   }
 
   /**
-   * @param {String} name
+   * @param {string} name
    * @param {any} object
    * @returns {NgModule}
    */
@@ -88,7 +87,7 @@ export class NgModule {
   }
 
   /**
-   * @param {String} name
+   * @param {string} name
    * @param {any} object
    * @returns {NgModule}
    */
@@ -107,11 +106,20 @@ export class NgModule {
     return this;
   }
 
+  /**
+   * @param {Function} block
+   * @returns {NgModule}
+   */
   run(block) {
     this.runBlocks.push(block);
     return this;
   }
 
+  /**
+   * @param {string} name
+   * @param {*} options
+   * @returns {NgModule}
+   */
   component(name, options) {
     if (options && isFunction(options)) {
       options.$$moduleName = name;
@@ -120,6 +128,11 @@ export class NgModule {
     return this;
   }
 
+  /**
+   * @param {string} name
+   * @param {*} providerFunction
+   * @returns {NgModule}
+   */
   factory(name, providerFunction) {
     if (providerFunction && isFunction(providerFunction)) {
       providerFunction.$$moduleName = name;
@@ -132,6 +145,11 @@ export class NgModule {
     return this;
   }
 
+  /**
+   * @param {string} name
+   * @param {*} serviceFunction
+   * @returns {NgModule}
+   */
   service(name, serviceFunction) {
     if (serviceFunction && isFunction(serviceFunction)) {
       serviceFunction.$$moduleName = name;
@@ -144,6 +162,11 @@ export class NgModule {
     return this;
   }
 
+  /**
+   * @param {string} name
+   * @param {*} providerType
+   * @returns {NgModule}
+   */
   provider(name, providerType) {
     if (providerType && isFunction(providerType)) {
       providerType.$$moduleName = name;
@@ -152,6 +175,11 @@ export class NgModule {
     return this;
   }
 
+  /**
+   * @param {string} name
+   * @param {*} decorFn
+   * @returns {NgModule}
+   */
   decorator(name, decorFn) {
     if (decorFn && isFunction(decorFn)) {
       decorFn.$$moduleName = name;
@@ -160,6 +188,11 @@ export class NgModule {
     return this;
   }
 
+  /**
+   * @param {string} name
+   * @param {*} directiveFactory
+   * @returns {NgModule}
+   */
   directive(name, directiveFactory) {
     if (directiveFactory && isFunction(directiveFactory)) {
       directiveFactory.$$moduleName = name;
@@ -172,6 +205,11 @@ export class NgModule {
     return this;
   }
 
+  /**
+   * @param {string} name
+   * @param {*} animationFactory
+   * @returns {NgModule}
+   */
   animation(name, animationFactory) {
     if (animationFactory && isFunction(animationFactory)) {
       animationFactory.$$moduleName = name;
@@ -192,6 +230,11 @@ export class NgModule {
     return this;
   }
 
+  /**
+   * @param {string} name
+   * @param {*} ctlFn
+   * @returns {NgModule}
+   */
   controller(name, ctlFn) {
     if (ctlFn && isFunction(ctlFn)) {
       ctlFn.$$moduleName = name;