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

package/src/directive/aria/aria.js

@@ -1,4 +1,5 @@
 import { extend, hasOwn } from "../../shared/utils.js";
+import { $injectTokens } from "../../injection-tokens.js";
 
 const ARIA_DISABLE_ATTR = "ngAriaDisable";
 
@@ -84,7 +85,7 @@ export function AriaProvider() {
   };
 }
 
-ngDisabledAriaDirective.$inject = ["$aria"];
+ngDisabledAriaDirective.$inject = [$injectTokens.$aria];
 export function ngDisabledAriaDirective($aria) {
   return $aria.$$watchExpr(
     "ngDisabled",
@@ -94,7 +95,7 @@ export function ngDisabledAriaDirective($aria) {
   );
 }
 
-ngShowAriaDirective.$inject = ["$aria"];
+ngShowAriaDirective.$inject = [$injectTokens.$aria];
 export function ngShowAriaDirective($aria) {
   return $aria.$$watchExpr("ngShow", "aria-hidden", [], true);
 }
@@ -113,11 +114,11 @@ export function ngMessagesAriaDirective() {
   };
 }
 
-ngClickAriaDirective.$inject = ["$aria", "$parse"];
+ngClickAriaDirective.$inject = [$injectTokens.$aria, $injectTokens.$parse];
 export function ngClickAriaDirective($aria, $parse) {
   return {
     restrict: "A",
-    compile(elem, attr) {
+    compile(_elem, attr) {
       if (hasOwn(attr, ARIA_DISABLE_ATTR)) return;
 
       const fn = $parse(attr.ngClick);
@@ -177,7 +178,7 @@ export function ngClickAriaDirective($aria, $parse) {
   };
 }
 
-ngRequiredAriaDirective.$inject = ["$aria"];
+ngRequiredAriaDirective.$inject = [$injectTokens.$aria];
 export function ngRequiredAriaDirective($aria) {
   return $aria.$$watchExpr(
     "ngRequired",
@@ -197,7 +198,7 @@ export function ngCheckedAriaDirective($aria) {
   );
 }
 
-ngValueAriaDirective.$inject = ["$aria"];
+ngValueAriaDirective.$inject = [$injectTokens.$aria];
 export function ngValueAriaDirective($aria) {
   return $aria.$$watchExpr(
     "ngValue",
@@ -207,12 +208,12 @@ export function ngValueAriaDirective($aria) {
   );
 }
 
-ngHideAriaDirective.$inject = ["$aria"];
+ngHideAriaDirective.$inject = [$injectTokens.$aria];
 export function ngHideAriaDirective($aria) {
   return $aria.$$watchExpr("ngHide", "aria-hidden", [], false);
 }
 
-ngReadonlyAriaDirective.$inject = ["$aria"];
+ngReadonlyAriaDirective.$inject = [$injectTokens.$aria];
 export function ngReadonlyAriaDirective($aria) {
   return $aria.$$watchExpr(
     "ngReadonly",
@@ -222,7 +223,7 @@ export function ngReadonlyAriaDirective($aria) {
   );
 }
 
-ngModelAriaDirective.$inject = ["$aria"];
+ngModelAriaDirective.$inject = [$injectTokens.$aria];
 export function ngModelAriaDirective($aria) {
   function shouldAttachAttr(attr, normalizedAttr, elem, allowNonAriaNodes) {
     return (
@@ -365,7 +366,7 @@ export function ngModelAriaDirective($aria) {
   };
 }
 
-ngDblclickAriaDirective.$inject = ["$aria"];
+ngDblclickAriaDirective.$inject = [$injectTokens.$aria];
 export function ngDblclickAriaDirective($aria) {
   return function (scope, elem, attr) {
     if (hasOwn(attr, ARIA_DISABLE_ATTR)) return;

package/src/directive/attrs/attrs.js

@@ -1,6 +1,7 @@
 import { BOOLEAN_ATTR } from "../../shared/dom.js";
 import { directiveNormalize } from "../../shared/utils.js";
 import { ALIASED_ATTR } from "../../shared/constants.js";
+import { $injectTokens } from "../../injection-tokens.js";
 
 export const REGEX_STRING_REGEXP = /^\/(.+)\/([a-z]*)$/;
 
@@ -66,7 +67,7 @@ Object.entries(ALIASED_ATTR).forEach(([ngAttr]) => {
 ["src", "srcset", "href"].forEach((attrName) => {
   const normalized = directiveNormalize(`ng-${attrName}`);
   ngAttributeAliasDirectives[normalized] = [
-    "$sce",
+    $injectTokens.$sce,
     function ($sce) {
       return {
         priority: 99, // it needs to run after the attributes are interpolated

package/src/directive/bind/bind.js

@@ -1,11 +1,11 @@
 import { isUndefined, stringify, isNull, isProxy } from "../../shared/utils.js";
+import { $injectTokens } from "../../injection-tokens.js";
 
 /**
  * @returns {import('../../interface.ts').Directive}
  */
 export function ngBindDirective() {
   return {
-    restrict: "EA",
     /**
      * @param {import('../../core/scope/scope.js').Scope} scope
      * @param {Element} element
@@ -24,7 +24,6 @@ export function ngBindDirective() {
  */
 export function ngBindTemplateDirective() {
   return {
-    restrict: "EA",
     /**
      * @param {import('../../core/scope/scope.js').Scope} _scope
      * @param {Element} element
@@ -38,7 +37,7 @@ export function ngBindTemplateDirective() {
   };
 }
 
-ngBindHtmlDirective.$inject = ["$parse"];
+ngBindHtmlDirective.$inject = [$injectTokens.$parse];
 /**
  * @returns {import('../../interface.ts').Directive}
  */

package/src/directive/channel/channel.js

@@ -22,7 +22,6 @@ import { isObject } from "../../shared/utils.js";
  */
 export function ngChannelDirective() {
   return {
-    restrict: "EA",
     link: (scope, element, attrs) => {
       const hasTemplate = element.childNodes.length > 0;
       const channel = attrs["ngChannel"];

package/src/directive/class/class.js

@@ -9,7 +9,6 @@ function classDirective(name, selector) {
 
   return function () {
     return {
-      restrict: "EA",
       /**
        * @param {import("../../core/scope/scope.js").Scope} scope
        * @param {Element} element

package/src/directive/cloak/cloak.js

@@ -3,7 +3,6 @@
  */
 export function ngCloakDirective() {
   return {
-    restrict: "EA",
     compile(element, attr) {
       attr.$set("ngCloak", undefined);
       element.classList.remove("ng-cloak");

package/src/directive/include/include.js

@@ -1,26 +1,37 @@
 import { isDefined } from "../../shared/utils.js";
 import { hasAnimate } from "../../shared/utils.js";
+import { $injectTokens } from "../../injection-tokens.js";
 
-ngIncludeDirective.$inject = ["$templateRequest", "$anchorScroll", "$animate"];
+ngIncludeDirective.$inject = [
+  $injectTokens.$templateRequest,
+  $injectTokens.$anchorScroll,
+  $injectTokens.$animate,
+  $injectTokens.$exceptionHandler,
+];
 
 /**
  *
  * @param {*} $templateRequest
  * @param {import("../../services/anchor-scroll.js").AnchorScrollFunction} $anchorScroll
  * @param {*} $animate
- * @returns
+ * @param {import('../../core/error-handler.js').ErrorHandler} $exceptionHandler
+ * @returns {import('../../interface.js').Directive}
  */
-export function ngIncludeDirective($templateRequest, $anchorScroll, $animate) {
+export function ngIncludeDirective(
+  $templateRequest,
+  $anchorScroll,
+  $animate,
+  $exceptionHandler,
+) {
   return {
-    restrict: "EA",
     priority: 400,
     terminal: true,
     transclude: "element",
     controller: () => {},
     compile(_element, attr) {
-      const srcExp = attr.ngInclude || attr.src;
-      const onloadExp = attr.onload || "";
-      const autoScrollExp = attr.autoscroll;
+      const srcExp = attr["ngInclude"] || attr["src"];
+      const onloadExp = attr["onload"] || "";
+      const autoScrollExp = attr["autoscroll"];
 
       return (scope, $element, _$attr, ctrl, $transclude) => {
         function maybeScroll() {
@@ -73,7 +84,7 @@ export function ngIncludeDirective($templateRequest, $anchorScroll, $animate) {
                 if (scope.$$destroyed) return;
                 if (thisChangeId !== changeCounter) return;
                 const newScope = scope.$new();
-                ctrl.template = response;
+                ctrl["template"] = response;
 
                 // Note: This will also link all children of ng-include that were contained in the original
                 // html. If that content contains controllers, ... they could pollute/change the scope.
@@ -96,19 +107,20 @@ export function ngIncludeDirective($templateRequest, $anchorScroll, $animate) {
                 currentScope.$emit("$includeContentLoaded", src);
                 scope.$eval(onloadExp);
               },
-              () => {
+              (err) => {
                 if (scope.$$destroyed) return;
 
                 if (thisChangeId === changeCounter) {
                   cleanupLastIncludeContent();
                   scope.$emit("$includeContentError", src);
                 }
+                $exceptionHandler(new Error(err));
               },
             );
             scope.$emit("$includeContentRequested", src);
           } else {
             cleanupLastIncludeContent();
-            ctrl.template = null;
+            ctrl["template"] = null;
           }
         });
       };
@@ -129,7 +141,6 @@ ngIncludeFillContentDirective.$inject = ["$compile"];
  */
 export function ngIncludeFillContentDirective($compile) {
   return {
-    restrict: "EA",
     priority: -400,
     require: "ngInclude",
     link(scope, $element, _$attr, ctrl) {

package/src/directive/include/include.spec.js

@@ -100,6 +100,7 @@ describe("ngInclude", () => {
       $rootScope = injector.get("$rootScope");
       $rootScope.url = "http://example.com/myUrl";
       await wait(100);
+      debugger;
       expect(errorLog[0]).toMatch(/insecurl/);
     });
 

package/src/directive/input/input-example.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS</title>
+    <link rel="shortcut icon" type="image/png" href="images/favicon.ico" />
+    <script type="module" src="/src/index.js"></script>
+  </head>
+  <body ng-app ng-init='value = { some: "hello" }'>
+    <input type="radio" ng-model="selected" ng-value="value" />
+    {{selected.some}}
+    <button ng-click="selected = value">Set</button>
+    <button ng-click="selected =  { some: 'unset' }">Unset</button>
+  </body>
+</html>

package/src/directive/input/input.js

@@ -899,13 +899,19 @@ function radioInputType(scope, element, attr, ctrl) {
   };
 
   element.addEventListener("change", listener);
-
+  // NgModelController call
   ctrl.$render = function () {
     let { value } = attr;
     if (doTrim) {
       value = trim(value);
     }
-    element.checked = value === ctrl.$viewValue;
+    const deproxy = isProxy(ctrl.$viewValue)
+      ? ctrl.$viewValue.$target
+      : ctrl.$viewValue;
+    // the proxy may reach down two levels
+    element.checked =
+      (isProxy(value) ? value.$target : value) ===
+      (isProxy(deproxy) ? deproxy.$target : deproxy);
   };
 
   attr.$observe("value", ctrl.$render);

package/src/directive/input/input.spec.js

@@ -3626,25 +3626,23 @@ describe("input", () => {
         inputElm = $compile(
           '<input type="radio" ng-model="selected" ng-value="value">',
         )(scope);
+        expect(inputElm.checked).toBe(false);
         await wait();
-        scope.$apply(() => {
-          scope.value = { some: "object" };
-          scope.selected = scope.value;
-        });
-
+        scope.value = { some: "object" };
+        scope.selected = scope.value;
         await wait();
         expect(inputElm.checked).toBe(true);
 
-        scope.$apply(() => {
-          scope.value = { some: "other" };
-        });
-        await wait();
-        expect(inputElm.checked).toBe(false);
+        // inputElm = $compile(
+        //   '<input type="radio" ng-model="selected" ng-value="value">',
+        // )(scope);
+        // expect(inputElm.checked).toBe(false);
+        // await wait();
 
-        inputElm.click();
-        inputElm.dispatchEvent(new Event("change"));
-        await wait();
-        expect(scope.selected).toEqual(scope.value);
+        // inputElm.click();
+        // inputElm.dispatchEvent(new Event("change"));
+        // await wait();
+        // expect(scope.selected).toEqual(scope.value);
       });
 
       it("should work inside ngRepeat", async () => {

package/src/directive/messages/messages.js

@@ -25,7 +25,7 @@ class NgMessageCtrl {
     this.head = undefined;
     this.default = undefined;
 
-    this.$scope.$watchCollection(
+    this.$scope.$watch(
       this.$attrs["ngMessages"] || this.$attrs["for"],
       this.render.bind(this),
     );
@@ -269,7 +269,7 @@ function ngMessageDirectiveFactory(isDefault) {
 
           if (dynamicExp) {
             assignRecords(scope.$eval(dynamicExp));
-            scope.$watchCollection(dynamicExp, assignRecords);
+            scope.$watch(dynamicExp, assignRecords);
           } else {
             assignRecords(staticExp);
           }

package/src/directive/non-bindable/non-bindable.js

@@ -3,7 +3,6 @@
  */
 export function ngNonBindableDirective() {
   return {
-    restrict: "EA",
     terminal: true,
     priority: 1000,
   };

package/src/directive/observe/test.html

@@ -41,7 +41,7 @@
 
     <script>
       document.addEventListener("DOMContentLoaded", () => {
-        var app = window.angular.module("myApp", []);
+        const app = window.angular.module("myApp", []);
       });
     </script>
     <script type="module">

package/src/directive/options/options-example.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS</title>
+    <link rel="shortcut icon" type="image/png" href="images/favicon.ico" />
+    <script type="module" src="/src/index.js"></script>
+  </head>
+  <body ng-app ng-init='value = { some: "object" }'>
+    <input type="radio" ng-model="selected" ng-value="value" />
+    <button ng-click="selected = value">Set</button>
+  </body>
+</html>

package/src/directive/options/options.js

@@ -12,6 +12,12 @@ import {
 
 const ngOptionsMinErr = minErr("ngOptions");
 
+/** @type {HTMLOptionElement} */
+const optionTemplate = document.createElement("option");
+
+/** @type {HTMLOptGroupElement} */
+const optGroupTemplate = document.createElement("optgroup");
+
 const NG_OPTIONS_REGEXP =
   /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?(?:\s+disable\s+when\s+([\s\S]+?))?\s+for\s+(?:([$\w][$\w]*)|(?:\(\s*([$\w][$\w]*)\s*,\s*([$\w][$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;
 // 1: value expression (valueFn)
@@ -34,6 +40,12 @@ export const ngOptionsDirective = [
    * @returns
    */
   function ($compile, $parse) {
+    /**
+     * @param {import('../../interface.ts').Expression} optionsExp
+     * @param {HTMLSelectElement} selectElement
+     * @param {import('../../core/scope/scope.js').Scope} scope
+     * @returns
+     */
     function parseOptionsExpression(optionsExp, selectElement, scope) {
       const match = optionsExp.match(NG_OPTIONS_REGEXP);
       if (!match) {
@@ -160,7 +172,9 @@ export const ngOptionsDirective = [
         }),
 
         getOptions() {
+          /** @type {Option[]} */
           const optionItems = [];
+          /** @type {Object.<string, Option>} */
           const selectValueMap = {};
 
           // The option values were already computed in the `getWatchables` fn,
@@ -211,23 +225,17 @@ export const ngOptionsDirective = [
       };
     }
 
-    // Support: IE 9 only
-    // We can't just ('<option>') since JQLite is not smart enough
-    // to create it in <select> and IE barfs otherwise.
-    const optionTemplate = document.createElement("option");
-    const optGroupTemplate = document.createElement("optgroup");
-
     /**
      *
      * @param {import("../../core/scope/scope.js").Scope} scope
      * @param {HTMLSelectElement} selectElement
-     * @param {*} attr
+     * @param {import("../../core/compile/attributes.js").Attributes} attr
      * @param {*} ctrls
      */
     function ngOptionsPostLink(scope, selectElement, attr, ctrls) {
       const selectCtrl = ctrls[0];
       const ngModelCtrl = ctrls[1];
-      const { multiple } = attr;
+      const multiple = attr["multiple"];
 
       // The emptyOption allows the application developer to provide their own custom "empty"
       // option when the viewValue does not match any of the option values.
@@ -254,7 +262,7 @@ export const ngOptionsDirective = [
 
       let options;
       const ngOptions = parseOptionsExpression(
-        attr.ngOptions,
+        attr["ngOptions"],
         selectElement,
         scope,
       );
@@ -313,14 +321,14 @@ export const ngOptionsDirective = [
         // If we are using `track by` then we must watch the tracked value on the model
         // since ngModel only watches for object identity change
         // FIXME: When a user selects an option, this watch will fire needlessly
-        // if (ngOptions.trackBy) {
-        //   scope.$watch(
-        //     () => ngOptions.getTrackByValue(ngModelCtrl.$viewValue),
-        //     () => {
-        //       ngModelCtrl.$render();
-        //     },
-        //   );
-        // }
+        if (ngOptions.trackBy) {
+          scope.$watch(
+            ngOptions.getTrackByValue(ngModelCtrl.$viewValue),
+            () => {
+              ngModelCtrl.$render();
+            },
+          );
+        }
       } else {
         selectCtrl.writeValue = function writeNgOptionsMultiple(values) {
           // The options might not be defined yet when ngModel tries to render
@@ -373,11 +381,10 @@ export const ngOptionsDirective = [
         // compile the element since there might be bindings in it
         const linkFn = $compile(selectCtrl.emptyOption);
         assertArg(linkFn, "LinkFn required");
-        linkFn(scope);
-
         selectElement.prepend(selectCtrl.emptyOption);
+        linkFn(scope);
 
-        if (selectCtrl.emptyOption[0].nodeType === Node.COMMENT_NODE) {
+        if (selectCtrl.emptyOption.nodeType === Node.COMMENT_NODE) {
           // This means the empty option has currently no actual DOM node, probably because
           // it has been modified by a transclusion directive.
           selectCtrl.hasEmptyOption = false;
@@ -419,7 +426,12 @@ export const ngOptionsDirective = [
       // ------------------------------------------------------------------ //
 
       function addOptionElement(option, parent) {
-        const optionElement = optionTemplate.cloneNode(false);
+        /**
+         * @type {HTMLOptionElement}
+         */
+        const optionElement = /** @type {HTMLOptionElement} */ (
+          optionTemplate.cloneNode(false)
+        );
         parent.appendChild(optionElement);
         updateOptionElement(option, optionElement);
       }