@angular-wave/angular.ts 0.7.3 → 0.7.5

package/src/directive/channel/channel.js

@@ -3,38 +3,22 @@ import { $injectTokens } from "../../injection-tokens.js";
 
 ngChannelDirective.$inject = [$injectTokens.$eventBus];
 /**
- * Dynamically updates an element's content based on events published on a specified channel.
- * 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' } });
- *
- * @param {import("../../core/pubsub/pubsub.js").PubSub} $eventBus
+ * @param {import("../../services/pubsub/pubsub.js").PubSub} $eventBus
  * @returns {import("../../interface.ts").Directive}
  */
 export function ngChannelDirective($eventBus) {
   return {
     link: (scope, element, attrs) => {
-      const hasTemplate = element.childNodes.length > 0;
       const channel = attrs["ngChannel"];
+      const hasTemplateContent = element.childNodes.length > 0;
 
-      const key = $eventBus.subscribe(channel, (val) => {
-        if (!hasTemplate) {
-          element.innerHTML = val;
-        } else {
-          if (isObject(val)) {
-            scope.$merge(val);
+      const key = $eventBus.subscribe(channel, (value) => {
+        if (hasTemplateContent) {
+          if (isObject(value)) {
+            scope.$merge(value);
           }
+        } else {
+          element.innerHTML = value;
         }
       });
 

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

@@ -1,12 +1,14 @@
 import { Angular } from "../../loader.js";
-import { EventBus } from "../../core/pubsub/pubsub";
+import { EventBus } from "../../services/pubsub/pubsub.js";
+import { dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";
 
 describe("channel", () => {
   let $compile, $scope, element, unsubscribeSpy;
 
   beforeEach(() => {
-    window.angular = new Angular();
+    dealoc(document.getElementById("app"));
+    let angular = new Angular();
     angular.module("myModule", ["ng"]);
     angular
       .bootstrap(document.getElementById("app"), ["myModule"])

package/src/directive/class/class.js

@@ -2,6 +2,8 @@ import { getCacheData, setCacheData } from "../../shared/dom.js";
 import { hasAnimate, isObject, isString } from "../../shared/utils.js";
 
 /**
+ * @param {string} name
+ * @param {boolean|number} selector
  * @returns {() => import("../../interface.ts").Directive}
  */
 function classDirective(name, selector) {
@@ -17,6 +19,7 @@ function classDirective(name, selector) {
       link(scope, element, attr) {
         let classCounts = getCacheData(element, "$classCounts");
         let oldModulo = true;
+        /** @type {string|undefined} */
         let oldClassString;
 
         if (!classCounts) {
@@ -35,6 +38,9 @@ function classDirective(name, selector) {
           ngClassWatchAction(toClassString(val));
         });
 
+        /**
+         * @param {string} classString
+         */
         function addClasses(classString) {
           classString = digestClassCounts(split(classString), 1);
           if (hasAnimate(element)) {
@@ -48,6 +54,9 @@ function classDirective(name, selector) {
           }
         }
 
+        /**
+         * @param {string} classString
+         */
         function removeClasses(classString) {
           classString = digestClassCounts(split(classString), -1);
           if (hasAnimate(element)) {
@@ -61,6 +70,10 @@ function classDirective(name, selector) {
           }
         }
 
+        /**
+         * @param {string} oldClassString
+         * @param {string} newClassString
+         */
         function updateClasses(oldClassString, newClassString) {
           const oldClassArray = split(oldClassString);
           const newClassArray = split(newClassString);
@@ -111,6 +124,9 @@ function classDirective(name, selector) {
           oldModulo = newModulo;
         }
 
+        /**
+         * @param {string} newClassString
+         */
         function ngClassWatchAction(newClassString) {
           if (oldModulo === selector) {
             updateClasses(oldClassString, newClassString);

package/src/directive/class/class.spec.js

@@ -1,4 +1,5 @@
 import { Angular } from "../../loader.js";
+import { dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";
 
 describe("ngClass", () => {
@@ -8,6 +9,7 @@ describe("ngClass", () => {
   let injector;
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     window.angular = new Angular();
     window.angular.module("test", []);
     injector = window.angular.bootstrap(document.getElementById("app"), [

package/src/directive/events/event.spec.js

@@ -13,6 +13,7 @@ describe("event directives", () => {
   let app = document.getElementById("app");
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     angular = window.angular = new Angular();
     window.angular
       .module("myModule", ["ng"])

package/src/directive/events/events.js

@@ -6,31 +6,28 @@ import { directiveNormalize } from "../../shared/utils.js";
  */
 export const ngEventDirectives = {};
 
-"click copy cut dblclick focus blur keydown keyup keypress load mouseover mousein mouseout mouseleave paste submit touchstart touchend touchmove"
+"click copy cut dblclick focus blur keydown keyup keypress load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup paste submit touchstart touchend touchmove"
   .split(" ")
-  .forEach(
-    /** @param { string } eventName */
-    (eventName) => {
-      const directiveName = directiveNormalize(`ng-${eventName}`);
-      ngEventDirectives[directiveName] = [
-        "$parse",
-        "$exceptionHandler",
-        /**
-         * @param {import("../../core/parse/interface.ts").ParseService} $parse
-         * @param {import('../../core/exception-handler.js').ErrorHandler} $exceptionHandler
-         * @returns
-         */
-        ($parse, $exceptionHandler) => {
-          return createEventDirective(
-            $parse,
-            $exceptionHandler,
-            directiveName,
-            eventName,
-          );
-        },
-      ];
-    },
-  );
+  .forEach((eventName) => {
+    const directiveName = directiveNormalize(`ng-${eventName}`);
+    ngEventDirectives[directiveName] = [
+      "$parse",
+      "$exceptionHandler",
+      /**
+       * @param {import("../../core/parse/interface.ts").ParseService} $parse
+       * @param {import('../../core/exception-handler.js').ErrorHandler} $exceptionHandler
+       * @returns
+       */
+      ($parse, $exceptionHandler) => {
+        return createEventDirective(
+          $parse,
+          $exceptionHandler,
+          directiveName,
+          eventName,
+        );
+      },
+    ];
+  });
 
 /**
  *

package/src/directive/form/form.spec.js

@@ -17,6 +17,7 @@ describe("form", () => {
   let injector;
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     window.angular = new Angular();
     window.angular
       .module("myModule", ["ng"])
@@ -1403,6 +1404,7 @@ describe("form", () => {
       let dummy = document.getElementById("app");
       doc = '<form name="myForm"></form>';
       dummy.append(doc);
+      dealoc(document.getElementById("app"));
       let angular = new Angular();
       window.angular = new Angular();
       myModule = window.angular.module("myModule", []);

package/src/directive/http/http.js

@@ -1,3 +1,5 @@
+import { isObject } from "../../shared/utils.js";
+
 /**
  * @param {"get" | "delete" | "post" | "put"} method
  * @returns {import('../../interface.ts').DirectiveFactory}
@@ -18,8 +20,6 @@ export const ngPutDirective = defineDirective("put");
  * @typedef {"click" | "change" | "submit"} EventType
  */
 
-import { isObject } from "../../shared/utils";
-
 /**
  * Selects DOM event to listen for based on the element type.
  *
@@ -128,9 +128,9 @@ export function handleSwapResponse(html, swap, target, scope, $compile) {
  */
 export function createHttpDirective(method, attrName) {
   /**
-   * @param {{ [key: string]: Function }} $http
+   * @param {import("interface.ts").HttpService} $http
    * @param {import("../../core/compile/compile.js").CompileFn} $compile
-   * @param {import("../../services/log.js").LogService} $log
+   * @param {import("../../services/log/interface.ts").LogService} $log
    * @returns {import('../../interface.ts').Directive}
    */
   return function ($http, $compile, $log) {

package/src/directive/if/if.spec.js

@@ -1,5 +1,6 @@
 import {
   createElementFromHTML,
+  dealoc,
   getCacheData,
   setCacheData,
 } from "../../shared/dom.js";
@@ -17,6 +18,7 @@ describe("ngIf", () => {
     let angular;
 
     beforeEach(function () {
+      dealoc(document.getElementById("app"));
       angular = window.angular = new Angular();
       window.angular.module("test", []);
       injector = window.angular.bootstrap(document.getElementById("app"), [

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

@@ -18,6 +18,7 @@ describe("ngInclude", () => {
 
     beforeEach(() => {
       errorLog = [];
+      dealoc(document.getElementById("app"));
       delete window.angular;
       angular = window.angular = new Angular();
       module = angular

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

@@ -14,6 +14,7 @@ describe("input", () => {
   let error = [];
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     error = [];
     window.angular = new Angular();
     window.angular

package/src/directive/model/model.spec.js

@@ -17,6 +17,7 @@ describe("ngModel", () => {
 
   beforeEach(() => {
     errors = [];
+    dealoc(document.getElementById("app"));
     window.angular = new Angular();
     window.angular
       .module("myModule", ["ng"])
@@ -1554,6 +1555,7 @@ describe("ngModel", () => {
     let module;
 
     beforeEach(() => {
+      dealoc(document.getElementById("app"));
       window.angular = new Angular();
       module = window.angular
         .module("myModule", [])
@@ -1900,6 +1902,7 @@ describe("data-change", () => {
   let el = document.getElementById("app");
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     window.angular = new Angular();
   });
 

package/src/directive/model-options/model-options.spec.js

@@ -33,6 +33,7 @@ describe("ngModelOptions", () => {
       let injector;
 
       beforeEach(() => {
+        dealoc(document.getElementById("app"));
         window.angular = new Angular();
         window.angular
           .module("myModule", ["ng"])
@@ -1001,6 +1002,7 @@ describe("ngModelOptions", () => {
       let inputElm, module, $rootScope, angular;
 
       beforeEach(() => {
+        dealoc(document.getElementById("app"));
         window.angular = angular = new Angular();
         module = angular.module("myModule", []).directive("foo", () => ({
           replace: true,

package/src/directive/observe/{test.html → observe-demo.html}

@@ -47,7 +47,6 @@
     <script type="module">
       import {
         fluentSelect,
-        fluentOption,
         fluentTab,
         fluentTabPanel,
         fluentTabs,

package/src/directive/observe/observe.spec.js

@@ -1,11 +1,12 @@
 import { Angular } from "../../loader.js";
-import { createElementFromHTML } from "../../shared/dom.js";
+import { createElementFromHTML, dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";
 
 describe("observe", () => {
   let $compile, $scope, $rootScope, element, observerSpy;
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     window.angular = new Angular();
     angular.module("myModule", ["ng"]);
     angular

package/src/{core/pubsub/pubsub.html → directive/on/on.html}

@@ -11,7 +11,7 @@
     <script src="/jasmine/jasmine-html.js"></script>
     <script src="/jasmine/boot0.js"></script>
     <script src="/jasmine/boot1.js"></script>
-    <script type="module" src="/src/core/pubsub/pubsub.spec.js"></script>
+    <script type="module" src="/src/directive/on/on.spec.js"></script>
   </head>
   <body>
     <div id="app"></div>

package/src/{core → directive/on}/on.spec.js

@@ -1,6 +1,6 @@
-import { Angular } from "../loader.js";
-import { browserTrigger, wait } from "../shared/test-utils.js";
-import { createInjector } from "./di/injector.js";
+import { Angular } from "../../loader.js";
+import { browserTrigger, wait } from "../../shared/test-utils.js";
+import { createInjector } from "../../core/di/injector.js";
 
 describe("ngOn* event binding", () => {
   let $rootScope, module, injector, $compile;
@@ -19,6 +19,8 @@ describe("ngOn* event binding", () => {
     const element = $compile('<span ng-on-foo="name = name + 3"></span>')(
       $rootScope,
     );
+    expect($rootScope.name).toBe("Misko");
+
     browserTrigger(element, "foo");
     expect($rootScope.name).toBe("Misko3");
   });

package/src/directive/on/on.test.js

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

package/src/directive/options/options.spec.js

@@ -160,6 +160,7 @@ describe("ngOptions", () => {
     errors = [];
     element = document.getElementById("app");
     element.innerHTML = "test";
+    dealoc(document.getElementById("app"));
     window.angular = new Angular();
     window.angular
       .module("myModule", ["ng"])

package/src/directive/script/script.js

@@ -1,7 +1,7 @@
 scriptDirective.$inject = ["$templateCache"];
 
 /**
- * @param {import('../../core/cache/cache-factory').TemplateCache} $templateCache
+ * @param {import('../../services/template-cache/interface.ts').TemplateCache} $templateCache
  * @returns {import('../../interface.ts').Directive}
  */
 export function scriptDirective($templateCache) {

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

@@ -57,6 +57,7 @@ describe("select", () => {
   }
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     errors = [];
     window.angular = new Angular();
     window.angular

package/src/directive/setter/setter.js

@@ -1,7 +1,7 @@
 ngSetterDirective.$inject = ["$parse", "$log"];
 /**
  * @param {import('../../core/parse/interface.ts').ParseService} $parse
- * @param {import('../../services/log.js').LogService} $log
+ * @param {import('../../services/log/interface.ts').LogService} $log
  * @returns {import('../../interface.ts').Directive}
  */
 export function ngSetterDirective($parse, $log) {

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

@@ -1,10 +1,12 @@
 import { Angular } from "../../loader.js";
+import { dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";
 
 describe("setter", () => {
   let $compile, $rootScope, $parse, observerSpy, $log;
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     window.angular = new Angular();
     angular.module("myModule", []);
     angular

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

@@ -8,6 +8,7 @@ describe("ngSwitch", () => {
   let element;
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     window.angular = new Angular();
     window.angular.module("test", []);
     let injector = window.angular.bootstrap(

package/src/injection-tokens.js

@@ -9,6 +9,9 @@
  *   angular.$injectTokens.$animate,
  *   angular.$injectTokens.$templateRequest,
  * ];
+ *
+ * function myDirective($animate, $templateRequest) { ... }
+ *
  * ```
  * @type Readonly<Record<string, string>>
  */

package/src/interface.ts

@@ -1,5 +1,11 @@
 import { Attributes } from "./core/compile/attributes.js";
 import { Scope } from "./core/scope/scope.js";
+export * from "./services/http/interface.ts";
+export * from "./services/log/interface.ts";
+export * from "./services/log/log.js";
+export * from "./services/pubsub/pubsub.js";
+export * from "./services/template-cache/interface.ts";
+export * from "./services/template-cache/template-cache.js";
 
 /**
  * A JavaScript expression represented as a string, typically used in interpolation bindings.
@@ -12,6 +18,10 @@ import { Scope } from "./core/scope/scope.js";
  */
 export type Expression = string;
 
+export type ExpandoStore = {
+  data: { [key: string]: any };
+};
+
 /**
  * A dependency-annotated factory array used by AngularTS DI system.
  *

package/src/loader.js

@@ -12,12 +12,12 @@ import {
   getScope,
   setCacheData,
 } from "./shared/dom.js";
+import { Cache } from "./shared/cache.js";
 import { annotate, createInjector } from "./core/di/injector.js";
 import { NgModule } from "./core/di/ng-module.js";
-import { Cache } from "./core/cache/cache.js";
 import { registerNgModule } from "./public.js";
 import { unnestR } from "./shared/common.js";
-import { EventBus } from "./core/pubsub/pubsub.js";
+import { EventBus } from "./services/pubsub/pubsub.js";
 import { $injectTokens } from "./injection-tokens.js";
 
 const ngMinErr = minErr("ng");
@@ -35,12 +35,9 @@ const modules = {};
 
 export class Angular {
   constructor() {
-    Cache.clear(); // a ensure new instance of angular gets a clean cache
-
-    /** @type {Map<number, import("./core/cache/cache.js").ExpandoStore>} */
     this.$cache = Cache;
 
-    /** @type {import('./core/pubsub/pubsub.js').PubSub} */
+    /** @type {import('./services/pubsub/pubsub.js').PubSub} */
     this.$eventBus = EventBus;
 
     /**

package/src/public.js

@@ -57,7 +57,7 @@ import {
   AnimateAsyncRunFactoryProvider,
   AnimateRunnerFactoryProvider,
 } from "./animations/animate-runner.js";
-import { TemplateCacheProvider } from "./core/cache/cache-factory.js";
+import { TemplateCacheProvider } from "./services/template-cache/template-cache.js";
 import { ControllerProvider } from "./core/controller/controller.js";
 import { ExceptionHandlerProvider } from "./core/exception-handler.js";
 import { FilterProvider } from "./core/filter/filter.js";
@@ -68,7 +68,7 @@ import {
 } from "./services/http/http.js";
 import { HttpBackendProvider } from "./services/http-backend/http-backend.js";
 import { LocationProvider } from "./core/location/location.js";
-import { LogProvider } from "./services/log.js";
+import { LogProvider } from "./services/log/log.js";
 import { ParseProvider } from "./core/parse/parse.js";
 import { RootScopeProvider } from "./core/scope/scope.js";
 import { SceProvider, SceDelegateProvider } from "./core/sce/sce.js";
@@ -127,7 +127,7 @@ 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";
+import { PubSubProvider } from "./services/pubsub/pubsub.js";
 import {
   ngDeleteDirective,
   ngGetDirective,

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

@@ -1,5 +1,5 @@
 import { Angular } from "../../loader.js";
-import { createElementFromHTML } from "../../shared/dom.js";
+import { createElementFromHTML, dealoc } from "../../shared/dom.js";
 import { browserTrigger, wait } from "../../shared/test-utils.js";
 
 describe("ngStateRef", () => {
@@ -18,6 +18,7 @@ describe("ngStateRef", () => {
     $urlService;
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     app.innerHTML = "";
     window.location.hash = "";
     window.angular = new Angular();
@@ -663,6 +664,7 @@ describe("ngSrefActive", () => {
     _stateProvider;
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     window.location.hash = "";
     window.angular = new Angular();
     let module = window.angular.module("defaultModule", []);

package/src/router/params/param-factory.js

@@ -1,7 +1,13 @@
 import { DefType, Param } from "./param.js";
 
 export class ParamFactory {
+  /**
+   * @param {import("../url/url-config.js").UrlConfigProvider} urlServiceConfig
+   */
   constructor(urlServiceConfig) {
+    /**
+     * @type {import("../url/url-config.js").UrlConfigProvider}
+     */
     this.urlServiceConfig = urlServiceConfig;
   }
 

package/src/router/params/param.js

@@ -8,13 +8,15 @@ const isShorthand = (cfg) =>
     Object.prototype.hasOwnProperty.bind(cfg || {}),
   ).length === 0;
 
-let DefType;
-(function (DefType) {
-  DefType[(DefType["PATH"] = 0)] = "PATH";
-  DefType[(DefType["SEARCH"] = 1)] = "SEARCH";
-  DefType[(DefType["CONFIG"] = 2)] = "CONFIG";
-})(DefType || (DefType = {}));
-export { DefType };
+/**
+ * @private
+ * @enum {number}
+ */
+export const DefType = {
+  PATH: 0,
+  SEARCH: 1,
+  CONFIG: 2,
+};
 
 function getParamDeclaration(paramName, location, state) {
   const noReloadOnSearch =
@@ -27,6 +29,7 @@ function getParamDeclaration(paramName, location, state) {
   );
   return Object.assign(defaultConfig, paramConfig);
 }
+
 function unwrapShorthand(cfg) {
   cfg = isShorthand(cfg) ? { value: cfg } : cfg;
   getStaticDefaultValue["__cacheable"] = true;
@@ -36,6 +39,7 @@ function unwrapShorthand(cfg) {
   const $$fn = isInjectable(cfg.value) ? cfg.value : getStaticDefaultValue;
   return Object.assign(cfg, { $$fn });
 }
+
 function getType(cfg, urlType, location, id, paramTypes) {
   if (cfg.type && urlType && urlType.name !== "string")
     throw new Error(`Param '${id}' has two type configurations.`);
@@ -60,6 +64,7 @@ function getType(cfg, urlType, location, id, paramTypes) {
   }
   return cfg.type instanceof ParamType ? cfg.type : paramTypes.type(cfg.type);
 }
+
 /** returns false, true, or the squash value to indicate the "default parameter url squash policy". */
 function getSquashPolicy(config, isOptional, defaultPolicy) {
   const squash = config.squash;
@@ -70,6 +75,7 @@ function getSquashPolicy(config, isOptional, defaultPolicy) {
     `Invalid squash policy: '${squash}'. Valid policies: false, true, or arbitrary string`,
   );
 }
+
 function getReplace(config, arrayMode, isOptional, squash) {
   const defaultPolicy = [
     { from: "", to: isOptional || arrayMode ? undefined : "" },
@@ -83,7 +89,16 @@ function getReplace(config, arrayMode, isOptional, squash) {
     (item) => configuredKeys.indexOf(item.from) === -1,
   ).concat(replace);
 }
+
 export class Param {
+  /**
+   *
+   * @param {*} id
+   * @param {*} type
+   * @param {DefType} location
+   * @param {import("../url/url-config.js").UrlConfigProvider} urlConfig
+   * @param {*} state
+   */
   constructor(id, type, location, urlConfig, state) {
     const config = getParamDeclaration(id, location, state);
     type = getType(config, type, location, id, urlConfig.paramTypes);