@angular-wave/angular.ts 0.6.4 → 0.6.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.6.4",
+  "version": "0.6.5",
   "type": "module",
   "main": "dist/angular-ts.esm.js",
   "browser": "dist/angular-ts.umd.js",

package/src/animations/animate-js.js

@@ -15,7 +15,7 @@ export function AnimateJsProvider($animateProvider) {
     "$$AnimateRunner",
     /**
      *
-     * @param {import("../core/di/internal-injector").InjectorService} $injector
+     * @param {import("../core/di/internal-injector.js").InjectorService} $injector
      * @param {*} $$AnimateRunner
      * @returns
      */

package/src/animations/animation.js

@@ -38,7 +38,7 @@ export function AnimationProvider() {
     /**
      *
      * @param {*} $rootScope
-     * @param {import("../core/di/internal-injector").InjectorService} $injector
+     * @param {import("../core/di/internal-injector.js").InjectorService} $injector
      * @param {*} $$AnimateRunner
      * @param {import("./raf-scheduler").RafScheduler} $$rAFScheduler
      * @param {*} $$animateCache

package/src/core/compile/attributes.js

@@ -7,6 +7,7 @@ import {
   minErr,
   trim,
   directiveNormalize,
+  hasAnimate,
 } from "../../shared/utils.js";
 import { ALIASED_ATTR } from "../../shared/constants.js";
 
@@ -75,7 +76,11 @@ export class Attributes {
    */
   $addClass(classVal) {
     if (classVal && classVal.length > 0) {
-      this.$animate.addClass(this.$$element, classVal);
+      if (hasAnimate(this.$$element[0])) {
+        this.$animate.addClass(this.$$element, classVal);
+      } else {
+        this.$$element[0].classList.add(classVal.trim());
+      }
     }
   }
 
@@ -87,7 +92,11 @@ export class Attributes {
    */
   $removeClass(classVal) {
     if (classVal && classVal.length > 0) {
-      this.$animate.removeClass(this.$$element, classVal);
+      if (hasAnimate(this.$$element[0])) {
+        this.$animate.removeClass(this.$$element, classVal);
+      } else {
+        this.$$element[0].classList.remove(classVal.trim());
+      }
     }
   }
 
@@ -101,12 +110,20 @@ export class Attributes {
   $updateClass(newClasses, oldClasses) {
     const toAdd = tokenDifference(newClasses, oldClasses);
     if (toAdd && toAdd.length) {
-      this.$animate.addClass(this.$$element, toAdd);
+      if (hasAnimate(this.$$element[0])) {
+        this.$animate.addClass(this.$$element, toAdd);
+      } else {
+        this.$$element[0].classList.add(...toAdd.trim().split(/\s+/));
+      }
     }
 
     const toRemove = tokenDifference(oldClasses, newClasses);
     if (toRemove && toRemove.length) {
-      this.$animate.removeClass(this.$$element, toRemove);
+      if (hasAnimate(this.$$element[0])) {
+        this.$animate.removeClass(this.$$element, toRemove);
+      } else {
+        this.$$element[0].classList.remove(...toRemove.trim().split(/\s+/));
+      }
     }
   }
 

package/src/core/compile/compile.js

@@ -50,11 +50,10 @@ const $compileMinErr = minErr("$compile");
 
 const UNINITALIZED_VALIED = new Object();
 const EXCLUDED_DIRECTIVES = ["ngIf", "ngRepeat"];
-
+export const DIRECTIVE_SUFFIX = "Directive";
 CompileProvider.$inject = ["$provide", "$$sanitizeUriProvider"];
 export function CompileProvider($provide, $$sanitizeUriProvider) {
   const hasDirectives = {};
-  const Suffix = "Directive";
   const ALL_OR_NOTHING_ATTRS = {
     ngSrc: true,
     ngSrcset: true,
@@ -196,14 +195,14 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
       assertArg(directiveFactory, "directiveFactory");
       if (!Object.prototype.hasOwnProperty.call(hasDirectives, name)) {
         hasDirectives[name] = [];
-        $provide.factory(name + Suffix, [
+        $provide.factory(name + DIRECTIVE_SUFFIX, [
           "$injector",
           "$exceptionHandler",
           /**
            *
-           * @param {import("../../core/di/internal-injector").InjectorService} $injector
-           * @param {import('../exception-handler').ErrorHandler} $exceptionHandler
-           * @returns
+           * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
+           * @param {import("../exception-handler.js").ErrorHandler} $exceptionHandler
+           * @returns {import("../../types.js").Directive[]}
            */
           function ($injector, $exceptionHandler) {
             const directives = [];
@@ -524,7 +523,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
     "$sce",
     "$animate",
     /**
-     * @param {import("../../core/di/internal-injector").InjectorService} $injector
+     * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
      * @param {*} $interpolate
      * @param {import("../exception-handler").ErrorHandler} $exceptionHandler
      * @param {*} $templateRequest
@@ -723,7 +722,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
        * Compile function matches each node in nodeList against the directives. Once all directives
        * for a particular node are collected their compile functions are executed. The compile
        * functions return values - the linking functions - are combined into a composite linking
-       * function, which is the a linking function for the node.
+       * function, which is the linking function for the node.
        *
        * @param {NodeList|JQLite} nodeList an array of nodes or NodeList to compile
        * @param {*} transcludeFn A linking function, where the
@@ -745,27 +744,29 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         previousCompileContext,
       ) {
         const linkFns = [];
-        let attrs;
-        let directives;
         /**
          * @type {any}
          */
-        var nodeLinkFn;
+        var nodeLinkFn = null;
         let childNodes;
         let childLinkFn;
         let linkFnFound;
         let nodeLinkFnFound;
 
         for (let i = 0; i < nodeList.length; i++) {
-          attrs = new Attributes($rootScope, $animate, $exceptionHandler, $sce);
+          const attrs = new Attributes(
+            $rootScope,
+            $animate,
+            $exceptionHandler,
+            $sce,
+          );
 
           // We must always refer to `nodeList[i]` hereafter,
           // since the nodes can be replaced underneath us.
-          directives = collectDirectives(
+          const directives = collectDirectives(
             /** @type Element */ (nodeList[i]),
-            [],
             attrs,
-            i === 0 ? maxPriority : undefined,
+            maxPriority,
             ignoreDirective,
           );
 
@@ -822,8 +823,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
           let childLinkFn;
           let node;
           let childScope;
-          let i;
-          let ii;
           let idx;
           let childBoundTranscludeFn;
           let stableNodeList;
@@ -834,7 +833,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
             stableNodeList = new Array(nodeList.length);
 
             // create a sparse array by only copying the elements which have a linkFn
-            for (i = 0; i < linkFns.length; i += 3) {
+            for (let i = 0; i < linkFns.length; i += 3) {
               idx = linkFns[i];
               stableNodeList[idx] = nodeList[idx];
             }
@@ -842,7 +841,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
             stableNodeList = nodeList;
           }
 
-          for (i = 0, ii = linkFns.length; i < ii; ) {
+          for (let i = 0, ii = linkFns.length; i < ii; ) {
             node = stableNodeList[linkFns[i++]];
             nodeLinkFn = linkFns[i++];
             childLinkFn = linkFns[i++];
@@ -944,15 +943,14 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
        *        the function returns.
        * @param {Attributes|import("./attributes").AttributeLike} attrs The shared attrs object which is used to populate the normalized attributes.
        * @param {number=} maxPriority Max directive priority.
-       * @param {boolean=} ignoreDirective
+       * @param {string} [ignoreDirective]
+       * @return {import('../../types.js').Directive[]} An array to which the directives are added to. This array is sorted before the function returns.
        */
-      function collectDirectives(
-        node,
-        directives,
-        attrs,
-        maxPriority,
-        ignoreDirective,
-      ) {
+      function collectDirectives(node, attrs, maxPriority, ignoreDirective) {
+        /**
+         * @type {import('../../types.js').Directive[]}
+         */
+        const directives = [];
         const { nodeType } = node;
         const attrsMap = attrs.$attr;
         let nodeName;
@@ -960,42 +958,31 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         switch (nodeType) {
           case Node.ELEMENT_NODE /* Element */:
             nodeName = node.nodeName.toLowerCase();
-
-            // use the node name: <directive>
-            addDirective(
-              directives,
-              directiveNormalize(nodeName),
-              "E",
-              maxPriority,
-              ignoreDirective,
-            );
+            if (ignoreDirective !== directiveNormalize(nodeName)) {
+              // use the node name: <directive>
+              addDirective(
+                directives,
+                directiveNormalize(nodeName),
+                "E",
+                maxPriority,
+              );
+            }
 
             // iterate over the attributes
-            for (
-              var attr,
-                name,
-                nName,
-                value,
-                ngPrefixMatch,
-                nAttrs = node.attributes,
-                j = 0,
-                jj = nAttrs && nAttrs.length;
-              j < jj;
-              j++
-            ) {
+            for (let j = 0; j < node.attributes?.length; j++) {
               let isNgAttr = false;
               let isNgProp = false;
               let isNgEvent = false;
               let isNgObserve = false;
 
-              attr = nAttrs[j];
-              name = attr.name;
-              value = attr.value;
-
-              nName = directiveNormalize(name.toLowerCase());
+              let attr = node.attributes[j];
+              let name = attr.name;
+              let value = attr.value;
+              let nName = directiveNormalize(name.toLowerCase());
 
               // Support ng-attr-*, ng-prop-* and ng-on-*
-              if ((ngPrefixMatch = nName.match(NG_PREFIX_BINDING))) {
+              const ngPrefixMatch = nName.match(NG_PREFIX_BINDING);
+              if (ngPrefixMatch) {
                 isNgAttr = ngPrefixMatch[1] === "Attr";
                 isNgProp = ngPrefixMatch[1] === "Prop";
                 isNgEvent = ngPrefixMatch[1] === "On";
@@ -1016,10 +1003,19 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
                 if (isNgProp) {
                   addPropertyDirective(node, directives, nName, name);
                 } else {
-                  addEventDirective(directives, nName, name);
+                  directives.push(
+                    createEventDirective(
+                      $parse,
+                      $rootScope,
+                      $exceptionHandler,
+                      nName,
+                      name,
+                      /* forceAsync= */ false,
+                    ),
+                  );
                 }
               } else if (isNgObserve) {
-                addObserveDirective(directives, name, value);
+                directives.push(ngObserveDirective(name, value));
               } else {
                 // Update nName for cases where a prefix was removed
                 // NOTE: the .toLowerCase() is unnecessary and causes https://github.com/angular/angular.js/issues/16624 for ng-attr-*
@@ -1043,13 +1039,10 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
                   nName,
                   isNgAttr,
                 );
-                addDirective(
-                  directives,
-                  nName,
-                  "A",
-                  maxPriority,
-                  ignoreDirective,
-                );
+
+                if (nName !== ignoreDirective) {
+                  addDirective(directives, nName, "A", maxPriority);
+                }
               }
             }
 
@@ -1742,7 +1735,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
               // - combine directives as: processed + template + unprocessed
               const templateDirectives = collectDirectives(
                 /** @type {Element} */ (compileNode),
-                [],
                 newTemplateAttrs,
               );
               const unprocessedDirectives = directives.splice(
@@ -2011,33 +2003,21 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
        * looks up the directive and decorates it with exception handling and proper parameters. We
        * call this the boundDirective.
        *
+       * @param {import('../../types.js').Directive[]} tDirectives
        * @param {string} name name of the directive to look up.
        * @param {string} location The directive must be found in specific format.
        *   String containing any of these characters:
-       *
        *   * `E`: element name
        *   * `A': attribute
+       * @param maxPriority
        * @returns {boolean} true if directive was added.
        */
-      function addDirective(
-        tDirectives,
-        name,
-        location,
-        maxPriority,
-        ignoreDirective,
-      ) {
-        if (name === ignoreDirective) return false;
+      function addDirective(tDirectives, name, location, maxPriority) {
         let match = false;
         if (Object.prototype.hasOwnProperty.call(hasDirectives, name)) {
-          for (
-            let directive,
-              directives = $injector.get(name + Suffix),
-              i = 0,
-              ii = directives.length;
-            i < ii;
-            i++
-          ) {
-            directive = directives[i];
+          let directives = $injector.get(name + DIRECTIVE_SUFFIX);
+          for (let i = 0, ii = directives.length; i < ii; i++) {
+            let directive = directives[i];
             if (
               (isUndefined(maxPriority) || maxPriority > directive.priority) &&
               directive.restrict.indexOf(location) !== -1
@@ -2168,7 +2148,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
               replaceWith($rootElement, $compileNode, compileNode);
               const templateDirectives = collectDirectives(
                 compileNode,
-                [],
                 tempTemplateAttrs,
               );
 
@@ -2331,15 +2310,13 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
       }
 
       function addTextInterpolateDirective(directives, text) {
-        const interpolateFn = $interpolate(text, true); // Create interpolation function
+        const interpolateFn = $interpolate(text, true);
         if (interpolateFn) {
           directives.push({
             priority: 0,
-            // When transcluding a template that has bindings in the root
-            // we don't have a parent and thus need to add the class during linking fn.
             compile: () => (scope, node) => {
               scope.$watch(interpolateFn, (value) => {
-                node[0].nodeValue = value; // Update text node with new interpolated value
+                node[0].nodeValue = value;
               });
             },
           });
@@ -2411,10 +2388,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         );
       }
 
-      function sanitizeSrcsetPropertyValue(value) {
-        return sanitizeSrcset($sce.valueOf(value), "ng-prop-srcset");
-      }
-
       function sanitizeSrcset(value, invokeType) {
         if (!value) {
           return value;
@@ -2487,7 +2460,8 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
           propName === "srcset" &&
           (nodeName === "img" || nodeName === "source")
         ) {
-          sanitizer = sanitizeSrcsetPropertyValue;
+          sanitizer = (value) =>
+            sanitizeSrcset($sce.valueOf(value), "ng-prop-srcset");
         } else if (trustedContext) {
           sanitizer = $sce.getTrusted.bind($sce, trustedContext);
         }
@@ -2516,23 +2490,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         });
       }
 
-      function addEventDirective(directives, attrName, eventName) {
-        directives.push(
-          createEventDirective(
-            $parse,
-            $rootScope,
-            $exceptionHandler,
-            attrName,
-            eventName,
-            /* forceAsync= */ false,
-          ),
-        );
-      }
-
-      function addObserveDirective(directives, source, prop) {
-        directives.push(ngObserveDirective(source, prop));
-      }
-
       function addAttrInterpolateDirective(
         node,
         directives,

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

@@ -3664,7 +3664,9 @@ describe("$compile", () => {
           return {
             transclude: "element",
             link: function (scope, el, attrs, ctrl, transclude) {
-              el.after(transclude());
+              debugger;
+              const res = transclude();
+              el.after(res);
             },
           };
         },

package/src/core/controller/controller.js

@@ -66,7 +66,7 @@ export class ControllerProvider {
   /**
    * $get method for dependency injection.
    *
-   * @param {import("../../core/di/internal-injector").InjectorService} $injector
+   * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
    * @returns {Function} A service function that creates controllers.
    */
   $get = [

package/src/core/di/internal-injector.js

@@ -1,5 +1,5 @@
 import { assertArgFn, minErr } from "../../shared/utils.js";
-import { INJECTOR_LITERAL } from "./ng-module";
+import { INJECTOR_LITERAL } from "./ng-module.js";
 
 const ARROW_ARG = /^([^(]+?)=>/;
 const FN_ARGS = /^[^(]*\(\s*([^)]*)\)/m;

package/src/core/filter/filter.js

@@ -28,7 +28,7 @@ export function FilterProvider($provide) {
     "$injector",
     /**
      *
-     * @param {import("../../core/di/internal-injector").InjectorService} $injector
+     * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
      * @returns
      */
     function ($injector) {

package/src/core/q/q.js

@@ -65,7 +65,7 @@ export class $QProvider {
     /**
      *
      * @param {import('../scope/scope').Scope} $rootScope
-     * @param {import('../exception-handler').ErrorHandler} $exceptionHandler
+     * @param {import("../exception-handler.js").ErrorHandler} $exceptionHandler
      * @returns
      */
     function ($rootScope, $exceptionHandler) {

package/src/core/sce/sce.js

@@ -230,7 +230,7 @@ export function SceDelegateProvider() {
     "$$sanitizeUri",
     /**
      *
-     * @param {import("../../core/di/internal-injector").InjectorService} $injector
+     * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
      * @param {*} $$sanitizeUri
      * @returns
      */

package/src/core/scope/scope.js

@@ -72,7 +72,7 @@ let applyAsyncId = null;
 let $parse;
 /** @type {import('../../services/browser').Browser} */
 let $browser;
-/**@type {import('../exception-handler').ErrorHandler} */
+/**@type {import("../exception-handler.js").ErrorHandler} */
 let $exceptionHandler;
 
 /**
@@ -96,7 +96,7 @@ export class RootScopeProvider {
     "$parse",
     "$browser",
     /**
-     * @param {import('../exception-handler').ErrorHandler} exceptionHandler
+     * @param {import("../exception-handler.js").ErrorHandler} exceptionHandler
      * @param {import('../parse/parse').ParseService} parse
      * @param {import('../../services/browser').Browser} browser
      * @returns {Scope} root scope

package/src/core/timeout/timeout.js

@@ -14,7 +14,7 @@ export class TimeoutProvider {
      * @param {import('../scope/scope').Scope} $rootScope
      * @param {import('../../services/browser').Browser} $browser
      * @param {*} $q
-     * @param {import('../exception-handler').ErrorHandler} $exceptionHandler
+     * @param {import("../exception-handler.js").ErrorHandler} $exceptionHandler
      * @returns
      */
     ($rootScope, $browser, $q, $exceptionHandler) => {

package/src/directive/channel/channel.js

@@ -1,24 +1,42 @@
-import { EventBus } from "../../core/pubsub/pubsub";
+import { EventBus } from "../../core/pubsub/pubsub.js";
+import { isObject } from "../../shared/utils.js";
 
 /**
  * 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.
+ * If data is sent via `EventBus` on the specified `ngChannel`, the directive attempts to update the element's content accordingly,
+ * either by directly setting the inner HTML or merging the scope's data if the element contains a template.
+ *
+ * If the element has a template and incoming data is an object, the directive will merge all key/value pairs onto the scope,
+ * allowing Angular expressions (`{{ yourModel }}`) to be evaluated and rendered.
  *
  * When the scope is destroyed, the directive automatically unsubscribes from the channel.
+ * Example:
+ *
+ * HTML:
+ * <div ng-channel="userChannel">Hello {{ user.firstName }} {{ user.lastName }}</div>
  *
+ * JavaScript:
+ * angular.EventBus.publish('userChannel', { user: { firstName: 'John', lastName: 'Smith' } });
  *
- * @returns {import("../../types").Directive}
+ * @returns {import("../../types.js").Directive}
  */
 export function ngChannelDirective() {
   return {
     restrict: "EA",
     link: (scope, element, attrs) => {
-      const targetElement = element[0];
+      const hasTemplate = element[0].childNodes.length > 0;
       const channel = attrs["ngChannel"];
 
-      const key = EventBus.subscribe(channel, (val) => {
-        targetElement.innerHTML = val;
+      const key = EventBus.subscribe(channel, async (val) => {
+        if (!hasTemplate) {
+          element[0].innerHTML = val;
+        } else {
+          if (isObject(val)) {
+            Object.entries(val).forEach(([key, value]) => {
+              scope[key] = value;
+            });
+          }
+        }
       });
 
       scope.$on("$destroy", () => {

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

@@ -49,4 +49,21 @@ describe("channel", () => {
 
     expect(unsubscribeSpy).toHaveBeenCalled();
   });
+
+  it("should handle templates when EventBus emits a value", async () => {
+    element = $compile(
+      '<div ng-channel="testChannel">{{ a.firstName }} {{ a.lastName }}</div>',
+    )($scope);
+    $scope.$digest();
+    expect(element[0].textContent).toBe(" ");
+
+    EventBus.publish("testChannel", {
+      a: { firstName: "John", lastName: "Doe" },
+    });
+
+    await wait(100);
+    $scope.$digest();
+
+    expect(element[0].textContent).toBe("John Doe");
+  });
 });

package/src/directive/events/events.js

@@ -27,7 +27,7 @@ const forceAsyncEvents = {
        *
        * @param {*} $parse
        * @param {*} $rootScope
-       * @param {import('../../core/exception-handler').ErrorHandler} $exceptionHandler
+       * @param {import('../../core/exception-handler.js').ErrorHandler} $exceptionHandler
        * @returns
        */
       ($parse, $rootScope, $exceptionHandler) => {

package/src/directive/model/model.js

@@ -83,7 +83,7 @@ export class NgModelController {
 
   /**
    * @param {import('../../core/scope/scope').Scope} $scope
-   * @param {import('../../core/exception-handler').ErrorHandler} $exceptionHandler
+   * @param {import('../../core/exception-handler.js').ErrorHandler} $exceptionHandler
    * @param {import('../../core/compile/attributes').Attributes} $attr
    * @param {import('../../shared/jqlite/jqlite').JQLite} $element
    * @param {import("../../core/parse/parse.js").ParseService} $parse