@angular-wave/angular.ts 0.7.5 → 0.7.8

package/src/directive/repeat/repeat.js

@@ -1,5 +1,12 @@
-import { minErr, hashKey, isArrayLike, hasOwn } from "../../shared/utils.js";
-import { getBlockNodes } from "../../shared/dom.js";
+import {
+  minErr,
+  hashKey,
+  isArrayLike,
+  hasOwn,
+  isDefined,
+  callBackOnce,
+} from "../../shared/utils.js";
+import { getBlockNodes, removeElement } from "../../shared/dom.js";
 import { $injectTokens } from "../../injection-tokens.js";
 
 const NG_REMOVED = "$$NG_REMOVED";
@@ -78,7 +85,7 @@ export function ngRepeatDirective($animate) {
     transclude: "element",
     priority: 1000,
     terminal: true,
-    compile: (_$element, $attr) => {
+    compile: ($element, $attr) => {
       const expression = $attr["ngRepeat"];
       const hasAnimate = !!$attr["animate"];
 
@@ -126,6 +133,14 @@ export function ngRepeatDirective($animate) {
 
       let trackByIdExpFn;
 
+      const swap = callBackOnce(() => {
+        if (isDefined($attr["lazy"]) && isDefined($attr["swap"])) {
+          document
+            .querySelectorAll($attr["swap"])
+            .forEach((x) => removeElement(x));
+        }
+      });
+
       return function ngRepeatLink($scope, $element, $attr, ctrl, $transclude) {
         // Store a list of elements from previous run. This is a hash where key is the item from the
         // iterator, and the value is objects with following properties.
@@ -137,174 +152,181 @@ export function ngRepeatDirective($animate) {
         // hasOwnProperty.
         let lastBlockMap = Object.create(null);
         // watch props
-        $scope.$watch(rhs, (collection) => {
-          let index,
-            length,
-            previousNode = $element, // node that cloned nodes should be inserted after
-            // initialized to the comment node anchor
-            nextNode;
-          const // Same as lastBlockMap but it has the current state. It will become the
-            // lastBlockMap on the next iteration.
-            nextBlockMap = Object.create(null);
-          let collectionLength,
-            key,
-            value, // key/value of iteration
-            trackById,
-            trackByIdFn,
-            collectionKeys,
-            block, // last object information {scope, element, id}
-            nextBlockOrder,
-            elementsToRemove;
+        $scope.$watch(
+          rhs,
+          (collection) => {
+            swap();
+            let index,
+              length,
+              previousNode = $element, // node that cloned nodes should be inserted after
+              // initialized to the comment node anchor
+              nextNode;
+            const // Same as lastBlockMap but it has the current state. It will become the
+              // lastBlockMap on the next iteration.
+              nextBlockMap = Object.create(null);
+            let collectionLength,
+              key,
+              value, // key/value of iteration
+              trackById,
+              trackByIdFn,
+              collectionKeys,
+              block, // last object information {scope, element, id}
+              nextBlockOrder,
+              elementsToRemove;
 
-          if (aliasAs) {
-            $scope[aliasAs] = collection;
-          }
+            if (aliasAs) {
+              $scope[aliasAs] = collection;
+            }
 
-          if (isArrayLike(collection)) {
-            collectionKeys = collection;
-            trackByIdFn = trackByIdExpFn || trackByIdArrayFn;
-          } else {
-            trackByIdFn = trackByIdExpFn || trackByIdObjFn;
-            // if object, extract keys, in enumeration order, unsorted
-            collectionKeys = [];
-            for (const itemKey in collection) {
-              if (hasOwn(collection, itemKey) && itemKey.charAt(0) !== "$") {
-                collectionKeys.push(itemKey);
+            if (isArrayLike(collection)) {
+              collectionKeys = collection;
+              trackByIdFn = trackByIdExpFn || trackByIdArrayFn;
+            } else {
+              trackByIdFn = trackByIdExpFn || trackByIdObjFn;
+              // if object, extract keys, in enumeration order, unsorted
+              collectionKeys = [];
+              for (const itemKey in collection) {
+                if (hasOwn(collection, itemKey) && itemKey.charAt(0) !== "$") {
+                  collectionKeys.push(itemKey);
+                }
               }
             }
-          }
 
-          collectionLength = collectionKeys.length;
-          nextBlockOrder = new Array(collectionLength);
+            collectionLength = collectionKeys.length;
+            nextBlockOrder = new Array(collectionLength);
 
-          // locate existing items
-          for (index = 0; index < collectionLength; index++) {
-            key = collection === collectionKeys ? index : collectionKeys[index];
-            value = collection[key];
-            trackById = trackByIdFn($scope, key, value);
-            if (lastBlockMap[trackById]) {
-              // found previously seen block
-              block = lastBlockMap[trackById];
-              delete lastBlockMap[trackById];
-              nextBlockMap[trackById] = block;
-              nextBlockOrder[index] = block;
-            } else if (nextBlockMap[trackById]) {
-              // if collision detected. restore lastBlockMap and throw an error
-              Object.values(nextBlockOrder).forEach((block) => {
-                if (block && block.scope) lastBlockMap[block.id] = block;
-              });
-              throw ngRepeatMinErr(
-                "dupes",
-                "Duplicates keys in a repeater are not allowed. Repeater: {0}, Duplicate key: {1} for value: {2}",
-                expression,
-                trackById,
-                value,
-              );
-            } else {
-              // new never before seen block
-              nextBlockOrder[index] = {
-                id: trackById,
-                scope: undefined,
-                clone: undefined,
-              };
-              nextBlockMap[trackById] = true;
+            // locate existing items
+            for (index = 0; index < collectionLength; index++) {
+              key =
+                collection === collectionKeys ? index : collectionKeys[index];
+              value = collection[key];
+              trackById = trackByIdFn($scope, key, value);
+              if (lastBlockMap[trackById]) {
+                // found previously seen block
+                block = lastBlockMap[trackById];
+                delete lastBlockMap[trackById];
+                nextBlockMap[trackById] = block;
+                nextBlockOrder[index] = block;
+              } else if (nextBlockMap[trackById]) {
+                // if collision detected. restore lastBlockMap and throw an error
+                Object.values(nextBlockOrder).forEach((block) => {
+                  if (block && block.scope) lastBlockMap[block.id] = block;
+                });
+                throw ngRepeatMinErr(
+                  "dupes",
+                  "Duplicates keys in a repeater are not allowed. Repeater: {0}, Duplicate key: {1} for value: {2}",
+                  expression,
+                  trackById,
+                  value,
+                );
+              } else {
+                // new never before seen block
+                nextBlockOrder[index] = {
+                  id: trackById,
+                  scope: undefined,
+                  clone: undefined,
+                };
+                nextBlockMap[trackById] = true;
+              }
             }
-          }
 
-          // remove leftover items
-          for (let blockKey in lastBlockMap) {
-            block = lastBlockMap[blockKey];
-            elementsToRemove = block.clone;
-            if (hasAnimate) {
-              $animate.leave(elementsToRemove);
-            } else {
-              elementsToRemove.remove();
-            }
-            if (elementsToRemove.parentNode) {
-              // if the element was not removed yet because of pending animation, mark it as deleted
-              // so that we can ignore it later
-              for (
-                index = 0, length = elementsToRemove.length;
-                index < length;
-                index++
-              ) {
-                elementsToRemove[index][NG_REMOVED] = true;
+            // remove leftover items
+            for (let blockKey in lastBlockMap) {
+              block = lastBlockMap[blockKey];
+              elementsToRemove = block.clone;
+              if (hasAnimate) {
+                $animate.leave(elementsToRemove);
+              } else {
+                elementsToRemove.remove();
               }
+              if (elementsToRemove.parentNode) {
+                // if the element was not removed yet because of pending animation, mark it as deleted
+                // so that we can ignore it later
+                for (
+                  index = 0, length = elementsToRemove.length;
+                  index < length;
+                  index++
+                ) {
+                  elementsToRemove[index][NG_REMOVED] = true;
+                }
+              }
+              block.scope.$destroy();
             }
-            block.scope.$destroy();
-          }
 
-          for (index = 0; index < collectionLength; index++) {
-            key = collection === collectionKeys ? index : collectionKeys[index];
-            value = collection[key];
-            block = nextBlockOrder[index];
+            for (index = 0; index < collectionLength; index++) {
+              key =
+                collection === collectionKeys ? index : collectionKeys[index];
+              value = collection[key];
+              block = nextBlockOrder[index];
 
-            if (block.scope) {
-              // if we have already seen this object, then we need to reuse the
-              // associated scope/element
+              if (block.scope) {
+                // if we have already seen this object, then we need to reuse the
+                // associated scope/element
 
-              nextNode = previousNode;
+                nextNode = previousNode;
 
-              // skip nodes that are already pending removal via leave animation
-              do {
-                nextNode = nextNode.nextSibling;
-              } while (nextNode && nextNode[NG_REMOVED]);
+                // skip nodes that are already pending removal via leave animation
+                do {
+                  nextNode = nextNode.nextSibling;
+                } while (nextNode && nextNode[NG_REMOVED]);
 
-              if (getBlockStart(block) !== nextNode) {
-                // existing item which got moved
-                $animate.move(getBlockNodes(block.clone), null, previousNode);
-              }
-              previousNode = getBlockEnd(block);
-              updateScope(
-                block.scope,
-                index,
-                valueIdentifier,
-                value,
-                keyIdentifier,
-                key,
-                collectionLength,
-              );
-            } else {
-              // new item which we don't know about
-              $transclude(
-                /**
-                 * Clone attach function
-                 * @param {Array<NodeList>} clone
-                 * @param {import("../../core/scope/scope.js").Scope} scope
-                 */
+                if (getBlockStart(block) !== nextNode) {
+                  // existing item which got moved
+                  $animate.move(getBlockNodes(block.clone), null, previousNode);
+                }
+                previousNode = getBlockEnd(block);
+                updateScope(
+                  block.scope,
+                  index,
+                  valueIdentifier,
+                  value,
+                  keyIdentifier,
+                  key,
+                  collectionLength,
+                );
+              } else {
+                // new item which we don't know about
+                $transclude(
+                  /**
+                   * Clone attach function
+                   * @param {Array<NodeList>} clone
+                   * @param {import("../../core/scope/scope.js").Scope} scope
+                   */
 
-                (clone, scope) => {
-                  block.scope = scope;
-                  const endNode = clone;
-                  if (hasAnimate) {
-                    $animate.enter(clone, null, previousNode);
-                  } else {
-                    // @ts-ignore
-                    previousNode.after(clone);
-                  }
+                  (clone, scope) => {
+                    block.scope = scope;
+                    const endNode = clone;
+                    if (hasAnimate) {
+                      $animate.enter(clone, null, previousNode);
+                    } else {
+                      // @ts-ignore
+                      previousNode.after(clone);
+                    }
 
-                  // @ts-ignore
-                  previousNode = endNode;
-                  // Note: We only need the first/last node of the cloned nodes.
-                  // However, we need to keep the reference to the dom wrapper as it might be changed later
-                  // by a directive with templateUrl when its template arrives.
-                  block.clone = clone;
-                  nextBlockMap[block.id] = block;
-                  updateScope(
-                    block.scope,
-                    index,
-                    valueIdentifier,
-                    value,
-                    keyIdentifier,
-                    key,
-                    collectionLength,
-                  );
-                },
-              );
+                    // @ts-ignore
+                    previousNode = endNode;
+                    // Note: We only need the first/last node of the cloned nodes.
+                    // However, we need to keep the reference to the dom wrapper as it might be changed later
+                    // by a directive with templateUrl when its template arrives.
+                    block.clone = clone;
+                    nextBlockMap[block.id] = block;
+                    updateScope(
+                      block.scope,
+                      index,
+                      valueIdentifier,
+                      value,
+                      keyIdentifier,
+                      key,
+                      collectionLength,
+                    );
+                  },
+                );
+              }
             }
-          }
-          lastBlockMap = nextBlockMap;
-        });
+            lastBlockMap = nextBlockMap;
+          },
+          isDefined($attr["lazy"]),
+        );
       };
     },
   };

package/src/directive/setter/setter.js

@@ -1,8 +1,11 @@
-ngSetterDirective.$inject = ["$parse", "$log"];
+import { $injectTokens as $t } from "../../injection-tokens.js";
+
+ngSetterDirective.$inject = [$t.$parse, $t.$log];
+
 /**
  * @param {import('../../core/parse/interface.ts').ParseService} $parse
  * @param {import('../../services/log/interface.ts').LogService} $log
- * @returns {import('../../interface.ts').Directive}
+ * @returns {import('interface.ts').Directive}
  */
 export function ngSetterDirective($parse, $log) {
   return {
@@ -11,19 +14,19 @@ export function ngSetterDirective($parse, $log) {
       const modelExpression = attrs["ngSetter"];
 
       if (!modelExpression) {
-        $log.warn("ngSetter: Model expression is not provided.");
+        $log.warn("ng-setter: expression null");
         return;
       }
 
       const assignModel = $parse(modelExpression).assign;
 
       if (!assignModel) {
-        $log.warn("ngSetter: Invalid model expression.");
+        $log.warn("ng-setter: expression invalid");
         return;
       }
 
       const updateModel = (value) => {
-        assignModel(scope, value);
+        assignModel(scope, value.trim());
       };
 
       const observer = new MutationObserver((mutationsList) => {
@@ -43,16 +46,11 @@ export function ngSetterDirective($parse, $log) {
         }
       });
 
-      if (element && element) {
-        observer.observe(element, {
-          childList: true,
-          subtree: true,
-          characterData: true,
-        });
-      } else {
-        $log.warn("ngSetter: Element is not a valid DOM node.");
-        return;
-      }
+      observer.observe(element, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
 
       scope.$on("$destroy", () => observer.disconnect());
       updateModel(element.innerHTML);

package/src/directive/setter/setter.spec.js

@@ -7,7 +7,7 @@ describe("setter", () => {
 
   beforeEach(() => {
     dealoc(document.getElementById("app"));
-    window.angular = new Angular();
+    let angular = new Angular();
     angular.module("myModule", []);
     angular
       .bootstrap(document.getElementById("app"), ["myModule"])
@@ -44,34 +44,57 @@ describe("setter", () => {
     expect($rootScope.testModel).toBe("Initial content");
   });
 
+  it("should handle expression content in the element", async () => {
+    $rootScope.testModel = "";
+    $compile('<div ng-setter="testModel"> {{ 2 + 2 }} </div>')($rootScope);
+    await wait();
+
+    expect($rootScope.testModel).toBe("4");
+  });
+
+  it("should handle expression and text content in the element", async () => {
+    $rootScope.testModel = "";
+    $compile('<div ng-setter="testModel"> Res: {{ 2 + 2 }} </div>')($rootScope);
+    await wait();
+
+    expect($rootScope.testModel).toBe("Res: 4");
+  });
+
+  it("should update value if expression changes", async () => {
+    $rootScope.a = 2;
+    $compile('<div ng-setter="testModel"> {{ a + 2 }} </div>')($rootScope);
+    await wait();
+    expect($rootScope.testModel).toBe("4");
+
+    $rootScope.a = 4;
+    await wait();
+    expect($rootScope.testModel).toBe("6");
+  });
+
   it("should warn if no model expression is provided", async () => {
     spyOn($log, "warn");
 
     $compile("<div ng-setter></div>")($rootScope);
     await wait();
 
-    expect($log.warn).toHaveBeenCalledWith(
-      "ngSetter: Model expression is not provided.",
-    );
+    expect($log.warn).toHaveBeenCalledWith("ng-setter: expression null");
   });
 
-  it("should clean up the MutationObserver on scope destruction", async () => {
-    spyOn(window, "MutationObserver").and.returnValue(observerSpy);
-    const element = $compile('<div ng-setter="testModel"></div>')($rootScope);
+  it("should warn if invalid model expression is provided", async () => {
+    spyOn($log, "warn");
 
-    $rootScope.$destroy();
+    $compile("<div ng-setter='2+2'></div>")($rootScope);
     await wait();
-    expect(observerSpy.disconnect).toHaveBeenCalled();
+
+    expect($log.warn).toHaveBeenCalledWith("ng-setter: expression invalid");
   });
 
-  it("should gracefully handle invalid DOM elements", async () => {
-    spyOn(console, "warn");
+  it("should clean up the MutationObserver on scope destruction", async () => {
+    spyOn(window, "MutationObserver").and.returnValue(observerSpy);
+    $compile('<div ng-setter="testModel"></div>')($rootScope);
 
-    const element = $compile("<div></div>")($rootScope);
+    $rootScope.$destroy();
     await wait();
-
-    expect(console.warn).not.toHaveBeenCalledWith(
-      "ngSetter: Element is not a valid DOM node.",
-    );
+    expect(observerSpy.disconnect).toHaveBeenCalled();
   });
 });

package/src/directive/switch/switch.js

@@ -4,6 +4,7 @@ import { hasAnimate } from "../../shared/utils.js";
 ngSwitchDirective.$inject = ["$animate"];
 
 /**
+ * @param {*} $animate
  * @returns {import('../../interface.ts').Directive}
  */
 export function ngSwitchDirective($animate) {

package/src/directive/switch/switch.spec.js

@@ -209,7 +209,7 @@ describe("ngSwitch", () => {
 
     scope.$watch("value", () => {
       if (scope.value === "bar") {
-        scope.$evalAsync(() => {
+        Promise.resolve().then(() => {
           scope.value = "baz";
         });
       }