@angular-wave/angular.ts 0.7.8 → 0.8.0

package/src/filters/limit-to.js

@@ -4,7 +4,6 @@ import {
   isNumber,
   isNumberNaN,
   isString,
-  toInt,
 } from "../shared/utils.js";
 
 /**
@@ -23,7 +22,7 @@ export function limitToFilter() {
     if (Math.abs(Number(limit)) === Infinity) {
       limit = Number(limit);
     } else {
-      limit = toInt(/** @type {string} */ (limit));
+      limit = parseInt(/** @type {string} */ (limit), 10);
     }
     if (isNumberNaN(limit)) return input;
 
@@ -33,7 +32,7 @@ export function limitToFilter() {
     begin =
       !begin || isNaN(/** @type {any} */ (begin))
         ? 0
-        : toInt(/** @type {string} */ (begin));
+        : parseInt(/** @type {string} */ (begin), 10);
     begin =
       begin < 0 ? Math.max(0, /** @type {[]} */ (input).length + begin) : begin;
 

package/src/filters/limit-to.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../loader.js";
+import { Angular } from "../angular.js";
 import { createInjector } from "../core/di/injector.js";
 import { createElementFromHTML } from "../shared/dom.js";
 

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

@@ -1,4 +1,4 @@
-import { Angular } from "../loader.js";
+import { Angular } from "../angular.js";
 import { createInjector } from "../core/di/injector.js";
 
 describe("Filter: orderBy", () => {

package/src/index.js

@@ -1,4 +1,4 @@
-import { Angular } from "./loader.js";
+import { Angular } from "./angular.js";
 
 export const angular = new Angular();
 document.addEventListener("DOMContentLoaded", () => angular.init(document), {

package/src/injection-tokens.js

@@ -16,6 +16,9 @@
  * @type Readonly<Record<string, string>>
  */
 export const $injectTokens = Object.freeze({
+  $attrs: "$attrs",
+  $scope: "$scope",
+  $element: "$element",
   $$AnimateRunner: "$$AnimateRunner",
   $$animateAsyncRun: "$$animateAsyncRun",
   $$animateCache: "$$animateCache",
@@ -44,6 +47,7 @@ export const $injectTokens = Object.freeze({
   $ngViewScroll: "$ngViewScroll",
   $parse: "$parse",
   $rootScope: "$rootScope",
+  $rootElement: "$rootElement",
   $routerGlobals: "$routerGlobals",
   $sce: "$sce",
   $sceDelegate: "$sceDelegate",
@@ -54,7 +58,7 @@ export const $injectTokens = Object.freeze({
   $templateRequest: "$templateRequest",
   $transitions: "$transitions",
   $urlConfig: "$urlConfig",
-  $urlService: "$urlService",
+  $url: "$url",
   $view: "$view",
   // provide literals
   $provide: "$provide",

package/src/interface.ts

@@ -4,6 +4,8 @@ export * from "./core/di/ng-module.js";
 export * from "./services/http/interface.ts";
 export * from "./services/log/interface.ts";
 export * from "./services/log/log.js";
+export * from "./services/location/interface.ts";
+export * from "./services/location/location.js";
 export * from "./services/pubsub/pubsub.js";
 export * from "./services/template-cache/interface.ts";
 export * from "./services/template-cache/template-cache.js";
@@ -66,7 +68,7 @@ export interface Provider {
   /**
    * Register a directive
    * @param name - The name of the directive.
-   * @param provider - An object with a `$get` property that defines how the service is created.
+   * @param directive - An object with a `$get` property that defines how the service is created.
    */
   directive(name: string, directive: DirectiveFactory): Provider;
 

package/src/loader.md

@@ -1,155 +0,0 @@
-/\*\*
-
-- @ngdoc module
-- @name ng
-
-- @installation
-- @description
--
-- The ng module is loaded by default when an AngularTS application is started. The module itself
-- contains the essential components for an AngularTS application to function. The table below
-- lists a high level breakdown of each of the services/factories, filters, directives and testing
-- components available within this core module.
-- \*/
-
-/\*\*
-
-- @ngdoc directive
-- @name ngApp
--
-- @element ANY
-- @param {import('./interface.ts').Module} ngApp an optional application
-- {@link angular.module module} name to load.
-- @param {boolean=} ngStrictDi if this attribute is present on the app element, the injector will be
-- created in "strict-di" mode. This means that the application will fail to invoke functions which
-- do not use explicit function annotation (and are thus unsuitable for minification), as described
-- in {@link guide/di the Dependency Injection guide}, and useful debugging info will assist in
-- tracking down the root of these bugs.
--
-- @description
--
-- Use this directive to **auto-bootstrap** an AngularTS application. The `ngApp` directive
-- designates the **root element** of the application and is typically placed near the root element
-- of the page - e.g. on the `<body>` or `<html>` tags.
--
-- There are a few things to keep in mind when using `ngApp`:
-- - only one AngularTS application can be auto-bootstrapped per HTML document. The first `ngApp`
-- found in the document will be used to define the root element to auto-bootstrap as an
-- application. To run multiple applications in an HTML document you must manually bootstrap them using
-- {@link angular.bootstrap} instead.
-- - AngularTS applications cannot be nested within each other.
-- - Do not use a directive that uses {@link ng.$compile#transclusion transclusion} on the same element as `ngApp`.
-- This includes directives such as {@link ng.ngIf `ngIf`}, {@link ng.ngInclude `ngInclude`} and
-- {@link ngRoute.ngView `ngView`}.
-- Doing this misplaces the app {@link ng.$rootElement `$rootElement`} and the app's {@link auto.$injector injector},
-- causing animations to stop working and making the injector inaccessible from outside the app.
--
-- You can specify an **AngularTS module** to be used as the root module for the application. This
-- module will be loaded into the {@link auto.$injector} when the application is bootstrapped. It
-- should contain the application code needed or have dependencies on other modules that will
-- contain the code. See {@link angular.module} for more information.
--
-- In the example below if the `ngApp` directive were not placed on the `html` element then the
-- document would not be compiled, the `AppController` would not be instantiated and the `{{ a+b }}`
-- would not be resolved to `3`.
--
-- @example
--
-- ### Simple Usage
--
-- `ngApp` is the easiest, and most common way to bootstrap an application.
-- <example module="ngAppDemo" name="ng-app">
-    <file name="index.html">
-    <div ng-controller="ngAppDemoController">
-      I can add: {{a}} + {{b}} =  {{ a+b }}
-    </div>
-    </file>
-    <file name="script.js">
-    angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
-      $scope.a = 1;
-      $scope.b = 2;
-    });
-    </file>
-  </example>
--
-- @example
--
-- ### With `ngStrictDi`
--
-- Using `ngStrictDi`, you would see something like this:
-- <example ng-app-included="true" name="strict-di">
-    <file name="index.html">
-    <div ng-app="ngAppStrictDemo" ng-strict-di>
-        <div ng-controller="GoodController1">
-            I can add: {{a}} + {{b}} =  {{ a+b }}
-
-            <p>This renders because the controller does not fail to
-               instantiate, by using explicit annotation style (see
-               script.js for details)
-            </p>
-        </div>
-
-        <div ng-controller="GoodController2">
-            Name: <input ng-model="name"><br />
-            Hello, {{name}}!
-
-            <p>This renders because the controller does not fail to
-               instantiate, by using explicit annotation style
-               (see script.js for details)
-            </p>
-        </div>
-
-        <div ng-controller="BadController">
-            I can add: {{a}} + {{b}} =  {{ a+b }}
-
-            <p>The controller could not be instantiated, due to relying
-               on automatic function annotations (which are disabled in
-               strict mode). As such, the content of this section is not
-               interpolated, and there should be an error in your web console.
-            </p>
-        </div>
-
-    </div>
-    </file>
-    <file name="script.js">
-    angular.module('ngAppStrictDemo', [])
-      // BadController will fail to instantiate, due to relying on automatic function annotation,
-      // rather than an explicit annotation
-      .controller('BadController', function($scope) {
-        $scope.a = 1;
-        $scope.b = 2;
-      })
-      // Unlike BadController, GoodController1 and GoodController2 will not fail to be instantiated,
-      // due to using explicit annotations using the array style and $inject property, respectively.
-      .controller('GoodController1', ['$scope', function($scope) {
-        $scope.a = 1;
-        $scope.b = 2;
-      }])
-      .controller('GoodController2', GoodController2);
-      function GoodController2($scope) {
-        $scope.name = 'World';
-      }
-      GoodController2.$inject = ['$scope'];
-    </file>
-    <file name="style.css">
-    div[ng-controller] {
-        margin-bottom: 1em;
-        -webkit-border-radius: 4px;
-        border-radius: 4px;
-        border: 1px solid;
-        padding: .5em;
-    }
-    div[ng-controller^=Good] {
-        border-color: #d6e9c6;
-        background-color: #dff0d8;
-        color: #3c763d;
-    }
-    div[ng-controller^=Bad] {
-        border-color: #ebccd1;
-        background-color: #f2dede;
-        color: #a94442;
-        margin-bottom: 0;
-    }
-    </file>
-  </example>
-  */

package/src/{public.js → ng.js}

@@ -132,10 +132,11 @@ import {
   ngPostDirective,
   ngPutDirective,
 } from "./directive/http/http.js";
+import { $injectTokens as $t } from "./injection-tokens.js";
 
 /**
  * Initializes core `ng` module.
- * @param {import('./loader.js').Angular} angular
+ * @param {import('./angular.js').Angular} angular
  * @returns {import('./core/di/ng-module.js').NgModule} `ng` module
  */
 export function registerNgModule(angular) {
@@ -144,7 +145,7 @@ export function registerNgModule(angular) {
       "ng",
       [],
       [
-        "$provide",
+        $t.$provide,
         /** @param {import("./interface.js").Provider} $provide */
         ($provide) => {
           // $$sanitizeUriProvider needs to be before $compileProvider as it is used by it.
@@ -152,7 +153,7 @@ export function registerNgModule(angular) {
             $$sanitizeUri: SanitizeUriProvider,
           });
           $provide
-            .provider("$compile", CompileProvider)
+            .provider($t.$compile, CompileProvider)
             .directive({
               input: inputDirective,
               textarea: inputDirective,
@@ -269,7 +270,7 @@ export function registerNgModule(angular) {
             $state: StateProvider,
             $ngViewScroll: ViewScrollProvider,
             $templateFactory: TemplateFactoryProvider,
-            $urlService: UrlService,
+            $url: UrlService,
             $stateRegistry: StateRegistryProvider,
             $eventBus: PubSubProvider,
           });
@@ -277,14 +278,12 @@ export function registerNgModule(angular) {
       ],
     )
     .factory("$stateParams", [
-      "$routerGlobals",
+      $t.$routerGlobals,
       /**
        * @param {import('./router/globals.js').RouterGlobals} globals
        * @returns {import('./router/params/state-params.js').StateParams }
        */
-      function (globals) {
-        return globals.params;
-      },
+      (globals) => globals.params,
     ])
     .value("$trace", trace);
 }

package/src/{public.spec.js → ng.spec.js}

@@ -1,5 +1,5 @@
 import { createInjector } from "./core/di/injector.js";
-import { Angular } from "./loader.js";
+import { Angular } from "./angular.js";
 
 describe("public", () => {
   beforeEach(() => {

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

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createElementFromHTML, dealoc } from "../../shared/dom.js";
 import { browserTrigger, wait } from "../../shared/test-utils.js";
 
@@ -15,7 +15,7 @@ describe("ngStateRef", () => {
     $injector,
     $state,
     $stateParams,
-    $urlService;
+    $url;
 
   beforeEach(() => {
     dealoc(document.getElementById("app"));
@@ -30,7 +30,8 @@ describe("ngStateRef", () => {
        */
       ($stateProvider, $locationProvider) => {
         _locationProvider = $locationProvider;
-        $locationProvider.setHashPrefix("");
+        $locationProvider.html5ModeConf.enabled = false;
+        $locationProvider.hashPrefixConf = "";
         $stateProvider
           .state({ name: "top", url: "" })
           .state({ name: "other", url: "/other/:id", template: "other" })
@@ -60,9 +61,9 @@ describe("ngStateRef", () => {
     $rootScope = $injector.get("$rootScope");
     $compile = $injector.get("$compile");
     $state = $injector.get("$state");
-    $stateParams = $injector.get("$stateParams");
-    $urlService = $injector.get("$urlService");
-    $urlService.listen();
+    $stateParams = $injector.get("$routerGlobals").params;
+    $url = $injector.get("$url");
+    $url.listen();
   });
 
   afterEach(() => (window.location.hash = ""));
@@ -704,7 +705,7 @@ describe("ngSrefActive", () => {
     $rootScope = $injector.get("$rootScope");
     $compile = $injector.get("$compile");
     $state = $injector.get("$state");
-    $stateParams = $injector.get("$stateParams");
+    $stateParams = $injector.get("$routerGlobals").params;
   });
 
   it("should update class for sibling ngSref", async () => {

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

@@ -1,10 +1,5 @@
 import { filter, tail, unnestR } from "../../shared/common.js";
-import {
-  hasAnimate,
-  isDefined,
-  isFunction,
-  // isString,
-} from "../../shared/utils.js";
+import { hasAnimate, isDefined, isFunction } from "../../shared/utils.js";
 // import { kebobString } from "../../shared/strings.js";
 import { parse } from "../../shared/hof.js";
 import { ResolveContext } from "../resolve/resolve-context.js";
@@ -283,7 +278,7 @@ export let ngView = [
              * @param {string} viewName Name of the view.
              */
             newScope.$emit("$viewContentLoading", name);
-            const cloned = $transclude(newScope, function (clone) {
+            currentEl = $transclude(newScope, function (clone) {
               setCacheData(clone, "$ngViewAnim", $ngViewAnim);
               setCacheData(clone, "$ngView", $ngViewData);
               renderer.enter(clone, $element, function () {
@@ -299,7 +294,6 @@ export let ngView = [
               });
               cleanupLastView();
             });
-            currentEl = cloned;
             currentScope = newScope;
             /**
              * Fired once the view is **loaded**, *after* the DOM is rendered.

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

@@ -1,5 +1,5 @@
 import { createElementFromHTML, dealoc } from "../../shared/dom.js";
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { wait } from "../../shared/test-utils.js";
 
 describe("ngView", () => {
@@ -852,7 +852,7 @@ describe("ngView named", () => {
 
   // Test for https://github.com/angular-ui/ui-router/issues/3355
   xit("should target weird nested view setups using the view's simple name", async () => {
-    const tpl = `
+    elem.innerHTML = `
       <div>
         <div ng-view="main">
           MAIN-DEFAULT-
@@ -862,7 +862,6 @@ describe("ngView named", () => {
         </div>
       </div>
     `;
-    elem.innerHTML = tpl;
     $compile(elem)($rootScope);
 
     $state.go("test");
@@ -1833,9 +1832,9 @@ describe("angular 1.5+ style .component()", () => {
         name: "ng12-dynamic-directive",
         url: "/ng12dynamicDirective/:type",
         componentProvider: [
-          "$stateParams",
-          function ($stateParams) {
-            return $stateParams.type;
+          "$routerGlobals",
+          function ($routerGlobals) {
+            return $routerGlobals.params.type;
           },
         ],
       });
@@ -1861,9 +1860,9 @@ describe("angular 1.5+ style .component()", () => {
         name: "dynamicComponent",
         url: "/dynamicComponent/:type",
         componentProvider: [
-          "$stateParams",
-          function ($stateParams) {
-            return $stateParams.type;
+          "$routerGlobals",
+          function ($routerGlobals) {
+            return $routerGlobals.params.type;
           },
         ],
       });

package/src/router/{common/common.html → glob/glob.html}

@@ -6,13 +6,12 @@
 
     <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
     <link rel="stylesheet" href="/jasmine/jasmine.css" />
-    <link rel="stylesheet" href="/public/jasmine-helper.css" />
+    <link rel="stylesheet" href="/jasmine-helper.css" />
     <script src="/jasmine/jasmine.js"></script>
     <script src="/jasmine/jasmine-html.js"></script>
     <script src="/jasmine/boot0.js"></script>
     <script src="/jasmine/boot1.js"></script>
-    <script type="module" src="/src/router/common/glob.spec.js"></script>
-    <script type="module" src="/src/router/common/queue.spec.js"></script>
+    <script type="module" src="/src/router/glob/glob.spec.js"></script>
   </head>
   <body>
     <div id="app"></div>

package/src/router/{common/common.test.js → glob/glob.test.js}

@@ -1,10 +1,11 @@
 import { test, expect } from "@playwright/test";
 
-const TEST_URL = "src/router/common/common.html";
+const TEST_URL = "src/router/glob/glob.html";
 
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/router/globals.js

@@ -1,5 +1,5 @@
 import { StateParams } from "./params/state-params.js";
-import { Queue } from "./common/queue.js";
+import { Queue } from "../shared/queue.js";
 
 /** @typedef {import('../interface.ts').ServiceProvider} ServiceProvider } */
 

package/src/router/path/path-utils.js

@@ -89,8 +89,13 @@ export class PathUtils {
     // The param keys specified by the incoming toParams
     return toPath.map(makeInheritedParamsNode);
   }
+
   /**
    * Computes the tree changes (entering, exiting) between a fromPath and toPath.
+   * @param {PathNode[]} fromPath
+   * @param {PathNode[]} toPath
+   * @param {boolean} [reloadState]
+   * @returns {import("../transition/interface.js").TreeChanges}
    */
   static treeChanges(fromPath, toPath, reloadState) {
     const max = Math.min(fromPath.length, toPath.length);

package/src/router/router-test-hashbang.html

@@ -0,0 +1,45 @@
+<!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="../index.js"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        window.angular.module("router", []).config([
+          "$stateProvider",
+          "$locationProvider",
+          ($stateProvider, $locationProvider) => {
+            $locationProvider.html5ModeConf = {
+              enabled: false,
+            };
+            $stateProvider
+              .state({
+                name: "home",
+                url: "",
+                template: `
+                    <h1>Home</h1>
+                    <a ng-sref="page1">Page 1</a>
+                    <a ng-sref="page2">Page 2</a>
+                `,
+              })
+              .state({
+                name: "page1",
+                url: "/page1",
+                template: "<h3>Its the NG-Router hello world app!</h3>",
+              })
+              .state({
+                name: "page2",
+                url: "/page2",
+                template: "This is another template",
+              });
+          },
+        ]);
+      });
+    </script>
+  </head>
+  <body ng-app="router">
+    <ng-view></ng-view>
+  </body>
+</html>

package/src/router/services.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../loader.js";
+import { Angular } from "../angular.js";
 import { dealoc } from "../shared/dom.js";
 
 describe("router services", () => {
@@ -11,14 +11,14 @@ describe("router services", () => {
     let module = window["angular"].module("defaultModule", []);
     module.config(
       (
-        $urlServiceProvider,
+        $urlProvider,
         $stateRegistryProvider,
         $routerGlobalsProvider,
         $transitionsProvider,
         $stateProvider,
       ) => {
         providers = {
-          $urlServiceProvider,
+          $urlProvider,
           $stateRegistryProvider,
           $routerGlobalsProvider,
           $transitionsProvider,
@@ -33,7 +33,7 @@ describe("router services", () => {
   });
 
   it("Should expose ng-router providers from the UIRouter instance", () => {
-    expect(providers.$urlServiceProvider).toBeDefined();
+    expect(providers.$urlProvider).toBeDefined();
     expect(providers.$stateRegistryProvider).toBeDefined();
     expect(providers.$stateRegistryProvider).toBeDefined();
     expect(providers.$transitionsProvider).toBeDefined();
@@ -41,12 +41,11 @@ describe("router services", () => {
   });
 
   it("Should expose ng-router services from the UIRouter instance", () => {
-    expect($injector.get("$urlService")).toBeDefined();
+    expect($injector.get("$url")).toBeDefined();
     expect($injector.get("$stateRegistry")).toBeDefined();
     expect($injector.get("$routerGlobals")).toBeDefined();
     expect($injector.get("$transitions")).toBeDefined();
     expect($injector.get("$state")).toBeDefined();
-    expect($injector.get("$stateParams")).toBeDefined();
     expect($injector.get("$view")).toBeDefined();
     expect($injector.get("$trace")).toBeDefined();
   });

package/src/router/state/interface.ts

@@ -607,7 +607,7 @@ export interface StateDeclaration {
    *
    * An optional object which defines multiple views, or explicitly targets specific named ui-views.
    *
-   * - What is a view config
+   * - What is a view urlConfig
    * - What is a ui-view
    * - Shorthand controller/template
    * - Incompatible with ^

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

@@ -30,7 +30,7 @@ function dataBuilder(state) {
   return state.data;
 }
 
-function getUrlBuilder($urlService, root) {
+function getUrlBuilder($url, root) {
   return function (stateObject) {
     let stateDec = stateObject.self;
     // For future states, i.e., states whose name ends with `.**`,
@@ -50,9 +50,9 @@ function getUrlBuilder($urlService, root) {
     const parsed = parseUrl(stateDec.url);
     const url = !parsed
       ? stateDec.url
-      : $urlService.compile(parsed.val, { state: stateDec });
+      : $url.compile(parsed.val, { state: stateDec });
     if (!url) return null;
-    if (!$urlService.isMatcher(url))
+    if (!$url.isMatcher(url))
       throw new Error(`Invalid url '${url}' in state '${stateObject}'`);
     return parsed && parsed.root
       ? url

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

@@ -1,5 +1,5 @@
 import { StateBuilder } from "./state-builder.js";
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { dealoc } from "../../shared/dom.js";
 
 // TODO refactor this to url service as it is using the provider right now

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

@@ -1,6 +1,6 @@
 import { defaults, find } from "../../shared/common.js";
 import { propEq } from "../../shared/hof.js";
-import { Glob } from "../common/glob.js";
+import { Glob } from "../glob/glob.js";
 import { hasOwn, isFunction, isObject } from "../../shared/utils.js";
 
 /** @typedef {import('./interface.js').StateDeclaration} StateDeclaration */

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

@@ -16,8 +16,8 @@ import { $injectTokens, provider } from "../../injection-tokens.js";
  *
  */
 export class StateRegistryProvider {
-  static $inject = provider([
-    $injectTokens.$urlService,
+  /* @ignore */ static $inject = provider([
+    $injectTokens.$url,
     $injectTokens.$state,
     $injectTokens.$routerGlobals,
     $injectTokens.$view,