@angular-wave/angular.ts 0.9.2 → 0.9.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@angular-wave/angular.ts",
   "description": "A modern, optimized and type-safe version of AngularJS",
   "license": "MIT",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "type": "module",
   "main": "dist/angular-ts.esm.js",
   "module": "dist/angular-ts.esm.js",

package/src/angular.js

@@ -26,13 +26,6 @@ const $injectorMinErr = minErr("$injector");
 /** @type {Object.<string, NgModule>} */
 const modules = {};
 
-/**
- * Configuration option for AngularTS bootstrap process.
- *
- * @typedef {Object} AngularBootstrapConfig
- * @property {boolean} [strictDi] - Disable automatic function annotation for the application. This is meant to assist in finding bugs which break minified code. Defaults to `false`.
- */
-
 export class Angular {
   constructor() {
     this.$cache = Cache;
@@ -98,7 +91,7 @@ export class Angular {
    *     Each item in the array should be the name of a predefined module or a (DI annotated)
    *     function that will be invoked by the injector as a `config` block.
    *     See: {@link angular.module modules}
-   * @param {AngularBootstrapConfig} [config]
+   * @param {import("./interface.ts").AngularBootstrapConfig} [config]
    * @returns {import('./core/di/internal-injector.js').InjectorService} The created injector instance for this application.
    */
   bootstrap(element, modules, config) {
@@ -266,7 +259,7 @@ export class Angular {
    * @param {string} name The name of the module to create or retrieve.
    * @param {Array.<string>} [requires] If specified then new module is being created. If
    *        unspecified then the module is being retrieved for further configuration.
-   * @param {import("./interface.js").Injectable} [configFn] Optional configuration function for the module that gets
+   * @param {import("./interface.js").Injectable<any>} [configFn] Optional configuration function for the module that gets
    *        passed to {@link NgModule.config NgModule.config()}.
    * @returns {NgModule} A newly registered module.
    */

package/src/animations/animate.js

@@ -76,7 +76,7 @@ export function AnimateProvider($provide) {
    * ```
    *
    * @param {string} name The name of the animation (this is what the class-based CSS value will be compared to).
-   * @param {import("../interface.ts").Injectable} factory The factory function that will be executed to return the animation
+   * @param {import("../interface.ts").Injectable<any>} factory The factory function that will be executed to return the animation
    *                           object.
    */
   this.register = function (name, factory) {

package/src/animations/animation.js

@@ -12,6 +12,7 @@ import {
   applyAnimationStyles,
   prepareAnimationOptions,
 } from "./shared.js";
+import { $injectTokens as $t } from "../injection-tokens.js";
 
 const RUNNER_STORAGE_KEY = "$$animationRunner";
 const PREPARE_CLASSES_KEY = "$$animatePrepareClasses";
@@ -34,14 +35,14 @@ export function AnimationProvider() {
   }
 
   this.$get = [
-    "$rootScope",
-    "$injector",
-    "$$AnimateRunner",
-    "$$rAFScheduler",
-    "$$animateCache",
+    $t.$rootScope,
+    $t.$injector,
+    $t.$$AnimateRunner,
+    $t.$$rAFScheduler,
+    $t.$$animateCache,
     /**
      *
-     * @param {*} $rootScope
+     * @param {ng.RootScopeService} $rootScope
      * @param {import("../core/di/internal-injector").InjectorService} $injector
      * @param {*} $$AnimateRunner
      * @param {import("./raf-scheduler").RafScheduler} $$rAFScheduler
@@ -207,7 +208,6 @@ export function AnimationProvider() {
         // block. This way we can group animations for all the animations that
         // were apart of the same postDigest flush call.
         if (animationQueue.length > 1) return runner;
-
         $rootScope.$postUpdate(() => {
           const animations = [];
           animationQueue.forEach((entry) => {

package/src/core/compile/compile.js

@@ -42,6 +42,7 @@ import { PREFIX_REGEXP } from "../../shared/constants.js";
 import { createEventDirective } from "../../directive/events/events.js";
 import { Attributes } from "./attributes.js";
 import { ngObserveDirective } from "../../directive/observe/observe.js";
+import { $injectTokens as $t } from "../../injection-tokens.js";
 
 /**
  * A function passed as the fifth argument to a {@type PublicLinkFn} link function.
@@ -139,7 +140,7 @@ const EVENT_HANDLER_ATTR_REGEXP = /^(on[a-z]+|formaction)$/;
 export const DirectiveSuffix = "Directive";
 
 export class CompileProvider {
-  /* @ignore */ static $inject = ["$provide", "$$sanitizeUriProvider"];
+  /* @ignore */ static $inject = [$t.$provide, $t.$$sanitizeUriProvider];
 
   /**
    * @param {import('../../interface.js').Provider} $provide
@@ -333,7 +334,7 @@ export class CompileProvider {
     /**
      * @param {string|Object} name Name of the component in camelCase (i.e. `myComp` which will match `<my-comp>`),
      *    or an object map of components where the keys are the names and the values are the component definition objects.
-     * @param {import("../../interface.js").ComponentOptions} options Component definition object (a simplified
+     * @param {import("../../interface.js").Component} options Component definition object (a simplified
      *    {directive definition object}),
      *    with the following properties (all optional):
      *

package/src/core/controller/controller.js

@@ -71,7 +71,7 @@ export class ControllerProvider {
 
     /**
      * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
-     * @returns {Function} A service function that creates controllers.
+     * @returns {import("./interface.js").ControllerService} A service function that creates controllers.
      */
     ($injector) => {
       return (expression, locals, later, ident) => {
@@ -82,7 +82,7 @@ export class ControllerProvider {
         later = later === true;
 
         if (isString(expression)) {
-          match = expression.match(CNTRL_REG);
+          match = /** @type {string} */ (expression).match(CNTRL_REG);
           if (!match) {
             throw $controllerMinErr(
               "ctrlfmt",
@@ -119,7 +119,7 @@ export class ControllerProvider {
               locals,
               identifier,
               instance,
-              constructor || expression.name,
+              constructor || /** @type {any} */ (expression).name,
             );
           }
 
@@ -142,7 +142,7 @@ export class ControllerProvider {
                   locals,
                   identifier,
                   instance,
-                  constructor || expression.name,
+                  constructor || /** @type {any} */ (expression).name,
                 );
               }
             }
@@ -151,14 +151,18 @@ export class ControllerProvider {
           }.bind(this, { instance, identifier });
         }
 
-        instance = $injector.instantiate(expression, locals, constructor);
+        instance = $injector.instantiate(
+          /** @type {any} */ (expression),
+          locals,
+          constructor,
+        );
 
         if (identifier) {
           this.addIdentifier(
             locals,
             identifier,
             instance,
-            constructor || expression.name,
+            constructor || /** @type {any} */ (expression).name,
           );
         }
 

package/src/core/controller/interface.ts

@@ -0,0 +1,6 @@
+export type ControllerService = (
+  expression: string | Function | any[],
+  locals?: Record<string, any>,
+  later?: boolean,
+  ident?: string,
+) => object | (() => object);

package/src/core/di/injector.js

@@ -73,7 +73,7 @@ export function createInjector(modulesToLoad, strictDi = false) {
   /**
    * Registers a provider.
    * @param {string} name
-   * @param {import('../../interface.ts').ServiceProvider | import('../../interface.ts').InjectableFactory} provider
+   * @param {import('../../interface.ts').ServiceProvider | import('../../interface.ts').Injectable<any>} provider
    * @returns {import('../../interface.ts').ServiceProvider}
    */
   function provider(name, provider) {

package/src/core/di/internal-injector.js

@@ -173,6 +173,8 @@ export class ProviderInjector extends AbstractInjector {
       this.path.join(" <- "),
     );
   }
+
+  loadNewModules() {}
 }
 
 /**

package/src/core/di/ng-module.js

@@ -26,7 +26,7 @@ export class NgModule {
   /**
    * @param {string} name - Name of the module
    * @param {Array<string>} requires - List of modules which the injector will load before the current module
-   * @param {import("../../interface.js").Injectable} [configFn]
+   * @param {import("../../interface.js").Injectable<any>} [configFn]
    */
   constructor(name, requires, configFn) {
     assert(isString(name), "name required");
@@ -52,12 +52,14 @@ export class NgModule {
     /** @type {!Array<Array<*>>} */
     this.configBlocks = [];
 
-    /** @type {!Array.<import("../../interface.js").Injectable>} */
+    /** @type {!Array.<import("../../interface.js").Injectable<any>>} */
     this.runBlocks = [];
 
     if (configFn) {
       this.config(configFn);
     }
+
+    this.services = [];
   }
 
   /**
@@ -82,7 +84,7 @@ export class NgModule {
 
   /**
    *
-   * @param {import("../../interface.js").Injectable} configFn
+   * @param {import("../../interface.ts").Injectable<any>} configFn
    * @returns {NgModule}
    */
   config(configFn) {
@@ -91,7 +93,7 @@ export class NgModule {
   }
 
   /**
-   * @param {import("../../interface.js").Injectable} block
+   * @param {import("../../interface.ts").Injectable<any>} block
    * @returns {NgModule}
    */
   run(block) {
@@ -101,7 +103,7 @@ export class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").ComponentOptions} options
+   * @param {import("../../interface.ts").Component} options
    * @returns {NgModule}
    */
   component(name, options) {
@@ -114,7 +116,7 @@ export class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable} providerFunction
+   * @param {import("../../interface.ts").Injectable<any>} providerFunction
    * @returns {NgModule}
    */
   factory(name, providerFunction) {
@@ -127,20 +129,21 @@ export class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable} serviceFunction
+   * @param {import("../../interface.ts").Injectable<any>} serviceFunction
    * @returns {NgModule}
    */
   service(name, serviceFunction) {
     if (serviceFunction && isFunction(serviceFunction)) {
       serviceFunction["$$moduleName"] = name;
     }
+    this.services.push(name);
     this.invokeQueue.push([$t.$provide, "service", [name, serviceFunction]]);
     return this;
   }
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable} providerType
+   * @param {import("../../interface.ts").Injectable<any>} providerType
    * @returns {NgModule}
    */
   provider(name, providerType) {
@@ -153,7 +156,7 @@ export class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable} decorFn
+   * @param {import("../../interface.js").Injectable<any>} decorFn
    * @returns {NgModule}
    */
   decorator(name, decorFn) {
@@ -166,7 +169,7 @@ export class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable} directiveFactory
+   * @param {import("../../interface.js").Injectable<any>} directiveFactory
    * @returns {NgModule}
    */
   directive(name, directiveFactory) {
@@ -183,7 +186,7 @@ export class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable} animationFactory
+   * @param {import("../../interface.js").Injectable<any>} animationFactory
    * @returns {NgModule}
    */
   animation(name, animationFactory) {
@@ -200,7 +203,7 @@ export class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable} filterFn
+   * @param {import("../../interface.js").Injectable<any>} filterFn
    * @return {NgModule}
    */
   filter(name, filterFn) {
@@ -213,7 +216,7 @@ export class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable} ctlFn
+   * @param {import("../../interface.js").Injectable<any>} ctlFn
    * @returns {NgModule}
    */
   controller(name, ctlFn) {

package/src/core/filter/filter.js

@@ -30,8 +30,8 @@ export class FilterProvider {
   }
 
   /**
-   * @param {string|Record<string, import('../../interface.ts').FilterFactory>} name
-   * @param {import('../../interface.ts').FilterFactory} [factory]
+   * @param {string|Record<string, ng.FilterFn>} name
+   * @param {ng.FilterService} [factory]
    * @return {import('../../interface.ts').Provider}
    */
   register(name, factory) {
@@ -48,7 +48,7 @@ export class FilterProvider {
     $t.$injector,
     /**
      * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
-     * @returns {import('../../interface.ts').FilterFn}
+     * @returns {ng.FilterService}
      */
     ($injector) => (/** @type {string} */ name) => $injector.get(name + SUFFIX),
   ];

package/src/core/interpolate/interface.ts

@@ -0,0 +1,14 @@
+export interface InterpolationFunction {
+  (context: any): string;
+}
+
+export interface InterpolateService {
+  (
+    text: string,
+    mustHaveExpression?: boolean,
+    trustedContext?: string,
+    allOrNothing?: boolean,
+  ): InterpolationFunction | undefined;
+  endSymbol(): string;
+  startSymbol(): string;
+}

package/src/core/interpolate/interpolate.js

@@ -6,6 +6,7 @@ import {
   stringify,
 } from "../../shared/utils.js";
 import { constantWatchDelegate } from "../parse/parse.js";
+import { $injectTokens as $t } from "../../injection-tokens.js";
 
 const $interpolateMinErr = minErr("$interpolate");
 function throwNoconcat(text) {
@@ -53,13 +54,13 @@ export class InterpolateProvider {
   }
 
   $get = [
-    "$parse",
-    "$sce",
+    $t.$parse,
+    $t.$sce,
     /**
      *
-     * @param {import("../parse/interface.ts").ParseService} $parse
+     * @param {ng.ParseService} $parse
      * @param {*} $sce
-     * @returns
+     * @returns {ng.InterpolateService}
      */
     function ($parse, $sce) {
       /** @type {InterpolateProvider} */
@@ -308,7 +309,7 @@ export class InterpolateProvider {
             return concat.join("");
           };
 
-          return extend(
+          return /**@type {import("./interface.js").InterpolationFunction}  */ extend(
             (context, cb) => {
               let i = 0;
               const ii = expressions.length;
@@ -402,6 +403,7 @@ export class InterpolateProvider {
         return provider.endSymbol;
       };
 
+      // @ts-ignore
       return $interpolate;
     },
   ];

package/src/core/scope/scope.js

@@ -25,7 +25,7 @@ export function nextId() {
 }
 
 /**
- * @type {import('../parse/interface.ts').ParseService}
+ * @type {ng.ParseService}
  */
 let $parse;
 
@@ -1125,6 +1125,9 @@ export class Scope {
     return this.$root == /** @type {Scope} */ (this);
   }
 
+  /**
+   * @param {Function} fn
+   */
   $postUpdate(fn) {
     $postUpdateQueue.push(fn);
   }

package/src/directive/http/delete.spec.js

@@ -3,7 +3,7 @@ import { dealoc } from "../../shared/dom.js";
 // import { browserTrigger, wait } from "../../shared/test-utils.js";
 
 describe("ngDelete", () => {
-  let $compile, $rootScope, $httpBackend, el;
+  let $compile, $rootScope, el;
 
   beforeEach(() => {
     el = document.getElementById("app");
@@ -11,13 +11,10 @@ describe("ngDelete", () => {
     el.innerHTML = "";
     let angular = new Angular();
     angular.module("default", []);
-    angular
-      .bootstrap(el, ["default"])
-      .invoke((_$compile_, _$rootScope_, _$httpBackend_) => {
-        $compile = _$compile_;
-        $rootScope = _$rootScope_;
-        $httpBackend = _$httpBackend_;
-      });
+    angular.bootstrap(el, ["default"]).invoke((_$compile_, _$rootScope_) => {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+    });
   });
 
   it("should pass", () => {

package/src/directive/http/http.js

@@ -9,7 +9,7 @@ import {
 
 /**
  * @param {"get" | "delete" | "post" | "put"} method
- * @returns {import('../../interface.ts').DirectiveFactory}
+ * @returns {ng.DirectiveFactory}
  */
 function defineDirective(method) {
   const attrName = "ng" + method.charAt(0).toUpperCase() + method.slice(1);
@@ -18,16 +18,16 @@ function defineDirective(method) {
   return directive;
 }
 
-/** @type {import('../../interface.ts').DirectiveFactory} */
+/** @type {ng.DirectiveFactory} */
 export const ngGetDirective = defineDirective("get");
 
-/** @type {import('../../interface.ts').DirectiveFactory} */
+/** @type {ng.DirectiveFactory} */
 export const ngDeleteDirective = defineDirective("delete");
 
-/** @type {import('../../interface.ts').DirectiveFactory} */
+/** @type {ng.DirectiveFactory} */
 export const ngPostDirective = defineDirective("post");
 
-/** @type {import('../../interface.ts').DirectiveFactory} */
+/** @type {ng.DirectiveFactory} */
 export const ngPutDirective = defineDirective("put");
 
 /**
@@ -54,10 +54,10 @@ export function getEventNameForElement(element) {
  * Handles DOM manipulation based on a swap strategy and server-rendered HTML.
  *
  * @param {string} html - The HTML string returned from the server.
- * @param {import("../../interface.ts").SwapModeType} swap
+ * @param {import("./interface.ts").SwapModeType} swap
  * @param {Element} target - The target DOM element to apply the swap to.
- * @param {import('../../core/scope/scope.js').Scope} scope
- * @param {import('../../core/compile/compile.js').CompileFn} $compile
+ * @param {ng.Scope} scope
+ * @param {ng.CompileService} $compile
  */
 export function handleSwapResponse(html, swap, target, scope, $compile) {
   let nodes = [];
@@ -138,16 +138,16 @@ export function handleSwapResponse(html, swap, target, scope, $compile) {
  *
  * @param {"get" | "delete" | "post" | "put"} method - HTTP method to use.
  * @param {string} attrName - Attribute name containing the URL.
- * @returns {import('../../interface.ts').DirectiveFactory}
+ * @returns {ng.DirectiveFactory}
  */
 export function createHttpDirective(method, attrName) {
   /**
-   * @param {import("interface.ts").HttpService} $http
-   * @param {import("../../core/compile/compile.js").CompileFn} $compile
-   * @param {import("../../services/log/interface.ts").LogService} $log
-   * @param {import("../../core/parse/interface.ts").ParseService} $parse
-   * @param {import("../../router/state/state-service.js").StateProvider} $state
-   * @returns {import('../../interface.ts').Directive}
+   * @param {ng.HttpService} $http
+   * @param {ng.CompileService} $compile
+   * @param {ng.LogService} $log
+   * @param {ng.ParseService} $parse
+   * @param {ng.StateService} $state
+   * @returns {ng.Directive}
    */
   return function ($http, $compile, $log, $parse, $state) {
     /**
@@ -286,7 +286,7 @@ export function createHttpDirective(method, attrName) {
 
             handleSwapResponse(
               html,
-              /** @type {import("../../interface.ts").SwapModeType} */ (swap),
+              /** @type {import("./interface.ts").SwapModeType} */ (swap),
               target,
               scope,
               $compile,

package/src/directive/http/interface.ts

@@ -0,0 +1,36 @@
+/**
+ * Possible values for `data-swap` attribute
+ */
+export const SwapMode = {
+  /** (default) Replaces the contents inside the element */
+  innerHTML: "innerHTML",
+
+  /** Replaces the entire element, including the tag itself */
+  outerHTML: "outerHTML",
+
+  /** Inserts plain text (without parsing HTML) */
+  textContent: "textContent",
+
+  /** Inserts HTML immediately before the element itself */
+  beforebegin: "beforebegin",
+
+  /** Inserts HTML inside the element, before its first child */
+  afterbegin: "afterbegin",
+
+  /** Inserts HTML inside the element, after its last child */
+  beforeend: "beforeend",
+
+  /** Inserts HTML immediately after the element itself */
+  afterend: "afterend",
+
+  /** Removes the element entirely */
+  delete: "delete",
+
+  /** Performs no insertion (no-op) */
+  none: "none",
+} as const;
+
+/**
+ * Union type representing all possible DOM insertion modes.
+ */
+export type SwapModeType = keyof typeof SwapMode;

package/src/directive/http/put.spec.js

@@ -3,7 +3,7 @@ import { dealoc } from "../../shared/dom.js";
 // import { browserTrigger, wait } from "../../shared/test-utils.js";
 
 describe("ngPut", () => {
-  let $compile, $rootScope, $httpBackend, el;
+  let $compile, $rootScope, el;
 
   beforeEach(() => {
     el = document.getElementById("app");
@@ -11,13 +11,10 @@ describe("ngPut", () => {
     el.innerHTML = "";
     let angular = new Angular();
     angular.module("default", []);
-    angular
-      .bootstrap(el, ["default"])
-      .invoke((_$compile_, _$rootScope_, _$httpBackend_) => {
-        $compile = _$compile_;
-        $rootScope = _$rootScope_;
-        $httpBackend = _$httpBackend_;
-      });
+    angular.bootstrap(el, ["default"]).invoke((_$compile_, _$rootScope_) => {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+    });
   });
 
   it("should pass", () => {

package/src/directive/include/include.js

@@ -12,9 +12,9 @@ ngIncludeDirective.$inject = [
 /**
  *
  * @param {*} $templateRequest
- * @param {import("../../services/anchor-scroll.js").AnchorScrollFunction} $anchorScroll
+ * @param {import("../../services/anchor-scroll/anchor-scroll.js").AnchorScrollFunction} $anchorScroll
  * @param {*} $animate
- * @param {import('../../services/exception/interface.ts').Interface} $exceptionHandler
+ * @param {import('../../services/exception/interface.ts').ErrorHandler} $exceptionHandler
  * @returns {import('../../interface.js').Directive}
  */
 export function ngIncludeDirective(

package/src/{services/http-backend/http-backend.html → directive/inject/inject.html}

@@ -11,10 +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/services/http-backend/http-backend.spec.js"
-    ></script>
+    <script type="module" src="/src/directive/inject/inject.spec.js"></script>
   </head>
   <body>
     <div id="app"></div>

package/src/directive/inject/inject.js

@@ -0,0 +1,35 @@
+import { $injectTokens as $t } from "../../injection-tokens.js";
+
+ngInjectDirective.$inject = [$t.$log, $t.$injector];
+
+/**
+ * @param {ng.LogService} $log
+ * @param {ng.InjectorService} $injector
+ * @returns {import('interface.ts').Directive}
+ */
+export function ngInjectDirective($log, $injector) {
+  return {
+    restrict: "A",
+    link(scope, _element, attrs) {
+      const expr = attrs["ngInject"];
+
+      if (!expr) return;
+      // Match any identifier that starts with $, or ends with Service/Factory
+      // Example matches: $http, userService, authFactory
+      const replacedExpr = expr.replace(
+        /(\$[\w]+|[\w]+(?:Service|Factory))/g,
+        (match, name) => {
+          try {
+            const service = $injector.get(name);
+            scope.$target[name] = service;
+            return name;
+          } catch {
+            $log.warn(`Injectable ${name} not found in $injector`);
+            return match;
+          }
+        },
+      );
+      scope.$apply(replacedExpr);
+    },
+  };
+}