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

package/src/directive/repeat/repeat.js

@@ -1,5 +1,6 @@
 import { minErr, hashKey, isArrayLike, hasOwn } from "../../shared/utils.js";
 import { getBlockNodes } from "../../shared/dom.js";
+import { $injectTokens } from "../../injection-tokens.js";
 
 const NG_REMOVED = "$$NG_REMOVED";
 const ngRepeatMinErr = minErr("ngRepeat");
@@ -23,7 +24,7 @@ const ngRepeatMinErr = minErr("ngRepeat");
 const VAR_OR_TUPLE_REGEX =
   /^(?:(\s*[$\w]+)|\(\s*([$\w]+)\s*,\s*([$\w]+)\s*\))$/;
 
-ngRepeatDirective.$inject = ["$animate"];
+ngRepeatDirective.$inject = [$injectTokens.$animate];
 
 /**
  * TODO // Add type for animate service
@@ -137,15 +138,15 @@ export function ngRepeatDirective($animate) {
         let lastBlockMap = Object.create(null);
         // watch props
         $scope.$watch(rhs, (collection) => {
-          var index,
+          let index,
             length,
             previousNode = $element, // node that cloned nodes should be inserted after
             // initialized to the comment node anchor
-            nextNode,
-            // Same as lastBlockMap but it has the current state. It will become the
+            nextNode;
+          const // Same as lastBlockMap but it has the current state. It will become the
             // lastBlockMap on the next iteration.
-            nextBlockMap = Object.create(null),
-            collectionLength,
+            nextBlockMap = Object.create(null);
+          let collectionLength,
             key,
             value, // key/value of iteration
             trackById,
@@ -211,7 +212,7 @@ export function ngRepeatDirective($animate) {
           }
 
           // remove leftover items
-          for (var blockKey in lastBlockMap) {
+          for (let blockKey in lastBlockMap) {
             block = lastBlockMap[blockKey];
             elementsToRemove = block.clone;
             if (hasAnimate) {

package/src/directive/select/select.spec.js

@@ -1822,7 +1822,7 @@ describe("select", () => {
           await wait();
           let elems = element.querySelectorAll("option");
 
-          for (var i = 0; i < elems.length; i++) {
+          for (let i = 0; i < elems.length; i++) {
             elems[i][0].selected = true;
           }
           browserTrigger(element, "change");

package/src/directive/setter/setter.js

@@ -50,7 +50,7 @@ export function ngSetterDirective($parse, $log) {
           characterData: true,
         });
       } else {
-        console.warn("ngSetter: Element is not a valid DOM node.");
+        $log.warn("ngSetter: Element is not a valid DOM node.");
         return;
       }
 

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

@@ -2,17 +2,18 @@ import { Angular } from "../../loader.js";
 import { wait } from "../../shared/test-utils.js";
 
 describe("setter", () => {
-  let $compile, $rootScope, $parse, observerSpy;
+  let $compile, $rootScope, $parse, observerSpy, $log;
 
   beforeEach(() => {
     window.angular = new Angular();
     angular.module("myModule", ["ng"]);
     angular
       .bootstrap(document.getElementById("app"), ["myModule"])
-      .invoke((_$compile_, _$rootScope_, _$parse_) => {
+      .invoke((_$compile_, _$rootScope_, _$parse_, _$log_) => {
         $compile = _$compile_;
         $rootScope = _$rootScope_;
         $parse = _$parse_;
+        $log = _$log_;
       });
     observerSpy = jasmine.createSpyObj("MutationObserver", [
       "observe",
@@ -42,12 +43,12 @@ describe("setter", () => {
   });
 
   it("should warn if no model expression is provided", async () => {
-    spyOn(console, "warn");
+    spyOn($log, "warn");
 
     $compile("<div ng-setter></div>")($rootScope);
     await wait();
 
-    expect(console.warn).toHaveBeenCalledWith(
+    expect($log.warn).toHaveBeenCalledWith(
       "ngSetter: Model expression is not provided.",
     );
   });

package/src/directive/style/style.spec.js

@@ -11,7 +11,7 @@ describe("ng-style", () => {
   beforeEach(() => {
     window.angular = new Angular();
     window.angular.module("myModule", ["ng"]);
-    var injector = createInjector(["myModule"]).invoke(
+    const injector = createInjector(["myModule"]).invoke(
       ($rootScope, _$compile_) => {
         $scope = $rootScope.$new();
         $compile = _$compile_;

package/src/directive/switch/switch.js

@@ -93,7 +93,7 @@ export function ngSwitchWhenDirective() {
     transclude: "element",
     terminal: true,
     priority: 1200,
-    restrict: "EA",
+
     require: "^ngSwitch",
     link(scope, element, attrs, ctrl, $transclude) {
       const cases = attrs["ngSwitchWhen"]
@@ -120,7 +120,6 @@ export function ngSwitchWhenDirective() {
  */
 export function ngSwitchDefaultDirective() {
   return {
-    restrict: "EA",
     transclude: "element",
     terminal: true,
     priority: 1200,

package/src/directive/transclude/transclude.js

@@ -27,7 +27,6 @@ export const ngTranscludeDirective = [
    */
   function ($compile) {
     return {
-      restrict: "EA",
       compile: function ngTranscludeCompile(tElement) {
         // Remove and cache any original content to act as a fallback
         const fallbackLinkFn = $compile(tElement.childNodes);

package/src/directive/validators/validators.js

@@ -126,8 +126,8 @@ export const patternDirective = [
       restrict: "A",
       require: "?ngModel",
       compile: (_Elm, tAttr) => {
-        var patternExp;
-        var parseFn;
+        let patternExp;
+        let parseFn;
 
         if (tAttr["ngPattern"]) {
           patternExp = tAttr["ngPattern"];
@@ -150,7 +150,7 @@ export const patternDirective = [
         return function (scope, elm, attr, ctrl) {
           if (!ctrl) return;
 
-          var attrVal = attr["pattern"];
+          let attrVal = attr["pattern"];
 
           if (attr["ngPattern"]) {
             attrVal = parseFn(scope);
@@ -158,9 +158,9 @@ export const patternDirective = [
             patternExp = attr["pattern"];
           }
 
-          var regexp = parsePatternAttr(attrVal, patternExp, elm);
+          let regexp = parsePatternAttr(attrVal, patternExp, elm);
           attr.$observe("pattern", function (newVal) {
-            var oldRegexp = regexp;
+            const oldRegexp = regexp;
 
             regexp = parsePatternAttr(newVal, patternExp, elm);
 

package/src/examples/counter.html

@@ -0,0 +1,20 @@
+<!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>
+    <link rel="stylesheet" href="/css/angular.css" />
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  </head>
+  <body ng-app ng-cloak>
+    <button
+      class="bg-gray-100 p-2 rounded-md outline outline-gray-950/10 m-6"
+      ng-init="count = 0"
+      ng-click="count = count + 1"
+    >
+      Count is: {{ count }}
+    </button>
+  </body>
+</html>

package/src/filters/order-by.js

@@ -6,8 +6,9 @@ import {
   isString,
   minErr,
 } from "../shared/utils.js";
+import { $injectTokens } from "../injection-tokens.js";
 
-orderByFilter.$inject = ["$parse"];
+orderByFilter.$inject = [$injectTokens.$parse];
 
 /**
  * @returns {import('../interface.ts').FilterFn}

package/src/filters/order-by.spec.js

@@ -8,8 +8,8 @@ describe("Filter: orderBy", () => {
   beforeEach(() => {
     window.angular = new Angular();
     window.angular.module("myModule", ["ng"]);
-    var injector = createInjector(["myModule"]);
-    var $filter = injector.get("$filter");
+    const injector = createInjector(["myModule"]);
+    const $filter = injector.get("$filter");
     orderBy = orderByFilter = $filter("orderBy");
   });
 
@@ -710,8 +710,8 @@ describe("Filter: orderBy", () => {
     beforeEach(() => {
       window.angular = new Angular();
       window.angular.module("myModule", ["ng"]);
-      var injector = createInjector(["myModule"]);
-      var $filter = injector.get("$filter");
+      const injector = createInjector(["myModule"]);
+      const $filter = injector.get("$filter");
       orderBy = function (collection) {
         const args = Array.prototype.slice.call(arguments, 0);
         args[0] = arrayLike(args[0]);

package/src/index.spec.js

@@ -0,0 +1,11 @@
+import { angular } from "./index.js";
+
+describe("index", () => {
+  it("exports angular", () => {
+    expect(angular).toBeDefined();
+  });
+
+  it("initializes ng modules", async () => {
+    expect(angular.bootsrappedModules[0]).toEqual("ng");
+  });
+});

package/src/injection-tokens.js

@@ -0,0 +1,71 @@
+/**
+ * A helper list of tokens matching the standard injectables that come predefined in the core `ng` module.
+ * These string tokens are commonly injected into services, directives, or components via `$inject`.
+ *
+ * Example:
+ * ```js
+ *
+ * myDirective.$inject = [
+ *   angular.$injectTokens.$animate,
+ *   angular.$injectTokens.$templateRequest,
+ * ];
+ * ```
+ * @type Readonly<Record<string, string>>
+ */
+export const $injectTokens = Object.freeze({
+  $$AnimateRunner: "$$AnimateRunner",
+  $$animateAsyncRun: "$$animateAsyncRun",
+  $$animateCache: "$$animateCache",
+  $$animateCssDriver: "$$animateCssDriver",
+  $$animateJs: "$$animateJs",
+  $$animateJsDriver: "$$animateJsDriver",
+  $$animateQueue: "$$animateQueue",
+  $$animation: "$$animation",
+  $$rAFScheduler: "$$rAFScheduler",
+  $$taskTrackerFactory: "$$taskTrackerFactory",
+  $anchorScroll: "$anchorScroll",
+  $animate: "$animate",
+  $animateCss: "$animateCss",
+  $aria: "$aria",
+  $browser: "$browser",
+  $controller: "$controller",
+  $eventBus: "$eventBus",
+  $exceptionHandler: "$exceptionHandler",
+  $filter: "$filter",
+  $http: "$http",
+  $httpBackend: "$httpBackend",
+  $httpParamSerializer: "$httpParamSerializer",
+  $interpolate: "$interpolate",
+  $location: "$location",
+  $log: "$log",
+  $ngViewScroll: "$ngViewScroll",
+  $parse: "$parse",
+  $rootScope: "$rootScope",
+  $routerGlobals: "$routerGlobals",
+  $sce: "$sce",
+  $sceDelegate: "$sceDelegate",
+  $state: "$state",
+  $stateRegistry: "$stateRegistry",
+  $templateCache: "$templateCache",
+  $templateFactory: "$templateFactory",
+  $templateRequest: "$templateRequest",
+  $transitions: "$transitions",
+  $urlConfig: "$urlConfig",
+  $urlService: "$urlService",
+  $view: "$view",
+  // provide literals
+  $provide: "$provide",
+  $injector: "$injector",
+  $compileProvider: "$compileProvider",
+  $animateProvider: "$animateProvider",
+  $filterProvider: "$filterProvider",
+  $controllerProvider: "$controllerProvider",
+});
+
+/**
+ * Utility for mapping to service-names to providers
+ * @param {String[]} services
+ */
+export function provider(services) {
+  return services.map((x) => x + "Provider");
+}

package/src/interface.ts

@@ -104,7 +104,7 @@ export type FilterFn = (input: any, ...args: any[]) => any;
 export type FilterFactory = (...args: any[]) => FilterFn;
 
 /**
- * A controller constructor function used in AngularJS.
+ * A controller constructor function used in AngularTS.
  */
 export type ControllerConstructor = (...args: any[]) => void | Controller;
 
@@ -124,7 +124,7 @@ export interface ChangesObject<T = any> {
 export type OnChangesObject = Record<string, ChangesObject>;
 
 /**
- * AngularJS component lifecycle interface.
+ * AngularTS component lifecycle interface.
  */
 export interface Controller {
   /** Optional controller name (used in debugging) */
@@ -201,12 +201,12 @@ export type DirectiveCompileFn = (
 ) => void | DirectiveLinkFn | DirectivePrePost;
 
 /**
- * Defines the structure of an AngularJS directive.
+ * Defines the structure of an AngularTS directive.
  */
 export interface Directive {
   /** Optional name (usually inferred) */
   name?: string;
-  /** Restict option: 'A' and/or 'E' */
+  /** Restrict option: 'A' and/or 'E'. Defaults to 'EA' */
   restrict?: string;
   /** Compile function for the directive */
   compile?: DirectiveCompileFn;

package/src/loader.js

@@ -19,6 +19,7 @@ import { publishExternalAPI } from "./public.js";
 import { VERSION } from "./public.js";
 import { unnestR } from "./shared/common.js";
 import { EventBus } from "./core/pubsub/pubsub.js";
+import { $injectTokens } from "./injection-tokens.js";
 
 const ngMinErr = minErr("ng");
 const $injectorMinErr = minErr("$injector");
@@ -57,6 +58,7 @@ export class Angular {
     this.errorHandlingConfig = errorHandlingConfig;
 
     window["angular"] = this;
+    this.$injectTokens = $injectTokens;
     publishExternalAPI(this);
   }
 

package/src/public.js

@@ -1,3 +1,4 @@
+// @private
 import { CompileProvider } from "./core/compile/compile.js";
 import {
   inputDirective,
@@ -127,14 +128,14 @@ import {
 } from "./router/directives/view-directive.js";
 import { ngChannelDirective } from "./directive/channel/channel.js";
 import { ngSetterDirective } from "./directive/setter/setter.js";
+import { PubSubProvider } from "./core/pubsub/pubsub.js";
 
-//injected by Rollup plugin
 export const VERSION = "[VI]{version}[/VI]";
 
 /**
- * Initializes `ng`, `animate`, `message`, `aria` and `router` modules.
+ * Initializes core `ng` module.
  * @param {import('./loader.js').Angular} angular
- * @returns {import('./core/di/ng-module.js').NgModule} `ng`module
+ * @returns {import('./core/di/ng-module.js').NgModule} `ng` module
  */
 export function publishExternalAPI(angular) {
   const ng = angular
@@ -143,6 +144,7 @@ export function publishExternalAPI(angular) {
       [],
       [
         "$provide",
+        /** @type {import('./interface.js').Provider} */
         ($provide) => {
           // $$sanitizeUriProvider needs to be before $compileProvider as it is used by it.
           $provide.provider({
@@ -266,12 +268,17 @@ export function publishExternalAPI(angular) {
             $templateFactory: TemplateFactoryProvider,
             $urlService: UrlService,
             $stateRegistry: StateRegistryProvider,
+            $eventBus: PubSubProvider,
           });
         },
       ],
     )
     .factory("$stateParams", [
       "$routerGlobals",
+      /**
+       * @param {import('./router/globals.js').RouterGlobals} globals
+       * @returns {import('./router/params/state-params.js').StateParams }
+       */
       function (globals) {
         return globals.params;
       },

package/src/public.spec.js

@@ -9,6 +9,7 @@ describe("public", () => {
   it("sets up the angular object and the module loader", () => {
     expect(window.angular).toBeDefined();
     expect(window.angular.module).toBeDefined();
+    expect(window.angular.$injectTokens).toBeDefined();
   });
 
   it("sets up the ng module", () => {

package/src/router/directives/state-directives.js

@@ -59,7 +59,7 @@ function clickHook(el, $state, type, getDef, scope) {
       // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
       const transition = setTimeout(function () {
         if (!el.getAttribute("disabled")) {
-          var res = $state.go(
+          const res = $state.go(
             target.ngState,
             target.ngStateParams,
             target.ngStateOpts,

package/src/router/directives/state-directives.spec.js

@@ -937,7 +937,6 @@ describe("ngSrefActive", () => {
       url: "/lazy",
       lazyLoad: () => {
         return Promise.resolve().then(() => {
-          debugger;
           _stateProvider
             .state({ name: "contacts.lazy", abstract: true, url: "/lazy" })
             .state({ name: "contacts.lazy.s1", url: "/s1" })
@@ -949,7 +948,6 @@ describe("ngSrefActive", () => {
     app.innerHTML =
       '<div ng-sref-active="active"><a ng-sref="contacts.lazy.s1">Lazy</a></div><div ng-sref-active="active"><a ng-sref="contacts.lazy.s2"></a></div>';
     $compile(app)($rootScope);
-    debugger;
     $state.transitionTo("contacts.lazy.s1");
     await wait(100);
 

package/src/router/directives/view-directive.js

@@ -178,7 +178,7 @@ export let ngView = [
     };
     const directive = {
       count: 0,
-      restrict: "EA",
+
       terminal: true,
       priority: 400,
       transclude: "element",
@@ -313,7 +313,6 @@ export function $ViewDirectiveFill($compile, $controller, $transitions) {
   const getControllerAs = parse("viewDecl.controllerAs");
   const getResolveAs = parse("viewDecl.resolveAs");
   return {
-    restrict: "EA",
     priority: -400,
     compile: function (tElement) {
       const initial = tElement.innerHTML;

package/src/router/params/param.js

@@ -8,7 +8,7 @@ const isShorthand = (cfg) =>
     Object.prototype.hasOwnProperty.bind(cfg || {}),
   ).length === 0;
 
-var DefType;
+let DefType;
 (function (DefType) {
   DefType[(DefType["PATH"] = 0)] = "PATH";
   DefType[(DefType["SEARCH"] = 1)] = "SEARCH";

package/src/router/state/interface.ts

@@ -459,10 +459,10 @@ export interface StateDeclaration {
    * - Each key (string) is the name of the dependency.
    * - Each value (function) is an injectable function which returns the dependency, or a promise for the dependency.
    *
-   * This style is based on AngularJS injectable functions, but can be used with any UI-Router implementation.
-   * If your code will be minified, the function should be ["annotated" in the AngularJS manner](https://docs.angularjs.org/guide/di#dependency-annotation).
+   * This style is based on AngularTS injectable functions, but can be used with any UI-Router implementation.
+   * If your code will be minified, the function should be ["annotated" in the AngularTS manner](https://docs.angularjs.org/guide/di#dependency-annotation).
    *
-   * #### AngularJS Example:
+   * #### AngularTS Example:
    * ```js
    * resolve: {
    *   // If you inject `myStateDependency` into a controller, you'll get "abc"

package/src/router/state/state-builder.js

@@ -263,6 +263,10 @@ export function resolvablesBuilder(state) {
  * using the [[builder]] method.
  */
 export class StateBuilder {
+  /**
+   * @param {import('./state-matcher.js').StateMatcher} matcher
+   * @param urlService
+   */
   constructor(matcher, urlService) {
     this.matcher = matcher;
     this.$injector = undefined;

package/src/router/state/state-builder.spec.js

@@ -1,22 +1,28 @@
 import { StateBuilder } from "./state-builder.js";
+import { Angular } from "../../loader.js";
 
 // TODO refactor this to url service as it is using the provider right now
-xdescribe("StateBuilder", function () {
+describe("StateBuilder", function () {
   const parent = { name: "" };
-  let builder,
-    matcher,
-    urlMatcherFactoryProvider = {
-      compile: function () {},
-      isMatcher: function () {},
-    };
+  let builder;
+  let $stateRegistry;
 
   beforeEach(function () {
-    matcher = new StateBuilder({});
-    builder = new StateBuilder(matcher, urlMatcherFactoryProvider);
-    builder.builder("views", ng1ViewsBuilder);
+    window.angular = new Angular();
+    window.angular.module("default", []);
+    let $injector = window.angular.bootstrap(document.getElementById("app"), [
+      "default",
+    ]);
+    $stateRegistry = $injector.get("$stateRegistry");
+    builder = $stateRegistry.builder;
+  });
+
+  it("expect it to be configured by state registry", () => {
+    expect($stateRegistry).toBeDefined();
+    expect($stateRegistry.builder).toBeDefined();
   });
 
-  xit("should use the state object to build a default view, when no `views` property is found", function () {
+  it("should use the state object to build a default view, when no `views` property is found", function () {
     const config = {
       url: "/foo",
       templateUrl: "/foo.html",
@@ -27,7 +33,7 @@ xdescribe("StateBuilder", function () {
 
     expect(built.$default).not.toEqual(config);
     expect(built.$default).toEqual(
-      expect.objectContaining({
+      jasmine.objectContaining({
         templateUrl: "/foo.html",
         controller: "FooController",
         resolveAs: "$resolve",
@@ -35,7 +41,7 @@ xdescribe("StateBuilder", function () {
     );
   });
 
-  xit("It should use the views object to build views, when defined", function () {
+  it("It should use the views object to build views, when defined", function () {
     const config = { a: { foo: "bar", controller: "FooController" } };
     const builtViews = builder.builder("views")({
       parent: parent,
@@ -45,7 +51,7 @@ xdescribe("StateBuilder", function () {
     expect(builtViews.a.controller).toEqual(config.a.controller);
   });
 
-  xit("should not allow a view config with both component and template keys", function () {
+  it("should not allow a view config with both component and template keys", function () {
     const config = {
       name: "foo",
       url: "/foo",
@@ -69,7 +75,7 @@ xdescribe("StateBuilder", function () {
     ).toThrow();
   });
 
-  xit("should replace a resolve: string value with a function that injects the service of the same name", function () {
+  it("should replace a resolve: string value with a function that injects the service of the same name", function () {
     const config = { resolve: { foo: "bar" } };
     expect(builder.builder("resolvables")).toBeDefined();
     const built = builder.builder("resolvables")(config);

package/src/router/state/state-registry.js

@@ -6,6 +6,7 @@ import { propEq } from "../../shared/hof.js";
 import { ResolveContext } from "../resolve/resolve-context.js";
 import { ng1ViewsBuilder } from "./views.js";
 import { isString } from "../../shared/utils.js";
+import { $injectTokens, provider } from "../../injection-tokens.js";
 
 /** @typedef {import('../../interface.ts').ServiceProvider} ServiceProvider } */
 /**
@@ -16,12 +17,12 @@ import { isString } from "../../shared/utils.js";
  * @implements {ServiceProvider}
  */
 export class StateRegistryProvider {
-  static $inject = [
-    "$urlServiceProvider",
-    "$stateProvider",
-    "$routerGlobalsProvider",
-    "$viewProvider",
-  ];
+  static $inject = provider([
+    $injectTokens.$urlService,
+    $injectTokens.$state,
+    $injectTokens.$routerGlobals,
+    $injectTokens.$view,
+  ]);
 
   /**
    * @param urlService

package/src/router/template-factory.spec.js

@@ -10,19 +10,26 @@ describe("templateFactory", () => {
     $scope,
     $compile,
     $stateRegistry,
-    $stateService;
+    $stateService,
+    error;
 
   beforeEach(() => {
     window.angular = new Angular();
-    window.angular.module("defaultModule", []);
+    window.angular
+      .module("defaultModule", [])
+      .decorator("$exceptionHandler", () => {
+        return (exception) => {
+          error = exception.message;
+        };
+      });
     $injector = window.angular.bootstrap(document.getElementById("app"), [
       "defaultModule",
     ]);
     $injector.invoke(
       (_$templateFactory_, _$httpBackend_, _$sce_, $rootScope) => {
-        ($templateFactory = _$templateFactory_),
-          ($httpBackend = _$httpBackend_),
-          ($sce = _$sce_);
+        $templateFactory = _$templateFactory_;
+        $httpBackend = _$httpBackend_;
+        $sce = _$sce_;
         $scope = $rootScope;
       },
     );
@@ -39,13 +46,12 @@ describe("templateFactory", () => {
       expect(await res).toEqual("Hello");
     });
 
-    xit("rejects untrusted URLs", async () => {
+    it("rejects untrusted URLs", async () => {
       let error = "No error thrown";
       try {
-        $templateFactory.fromUrl("http://evil.com/views/view.html");
-        await wait();
+        await $templateFactory.fromUrl("http://evil.com/views/view.html");
       } catch (e) {
-        error = e.message;
+        error = e;
       }
       expect(error).toMatch(/sce:insecurl/);
     });