npm - @angular-wave/angular.ts - Versions diffs - 0.7.1 → 0.7.3 - Mend

@angular-wave/angular.ts 0.7.1 → 0.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (870) hide show

package/src/directive/http/http.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS Test Runner</title>
+    <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" />
+    <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/directive/http/get.spec.js"></script>
+    <script type="module" src="/src/directive/http/post.spec.js"></script>
+    <script type="module" src="/src/directive/http/put.spec.js"></script>
+    <script type="module" src="/src/directive/http/delete.spec.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/src/directive/http/http.js ADDED Viewed

@@ -0,0 +1,245 @@
+/**
+ * @param {"get" | "delete" | "post" | "put"} method
+ * @returns {import('../../interface.ts').DirectiveFactory}
+ */
+function defineDirective(method) {
+  const attrName = "ng" + method.charAt(0).toUpperCase() + method.slice(1);
+  const directive = createHttpDirective(method, attrName);
+  directive["$inject"] = ["$http", "$compile", "$log"];
+  return directive;
+}
+export const ngGetDirective = defineDirective("get");
+export const ngDeleteDirective = defineDirective("delete");
+export const ngPostDirective = defineDirective("post");
+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.
+ *
+ * @param {Element} element - The DOM element to inspect.
+ * @returns {EventType} The name of the event to listen for.
+ */
+export function getEventNameForElement(element) {
+  const tag = element.tagName.toLowerCase();
+  if (["input", "textarea", "select"].includes(tag)) {
+    return "change";
+  } else if (tag === "form") {
+    return "submit";
+  }
+  return "click";
+}
+/**
+ * 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").SwapInsertPosition} 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
+ */
+export function handleSwapResponse(html, swap, target, scope, $compile) {
+  let nodes = [];
+  if (!["textcontent", "delete", "none"].includes(swap)) {
+    if (!html) {
+      return;
+    }
+    if (isObject(html)) {
+      scope.$merge(html);
+      return;
+    }
+    const compiled = $compile(html)(scope);
+    nodes =
+      compiled instanceof DocumentFragment
+        ? Array.from(compiled.childNodes)
+        : [compiled];
+  }
+  switch (swap) {
+    case "innerHTML":
+      target.replaceChildren(...nodes);
+      break;
+    case "outerHTML": {
+      const parent = target.parentNode;
+      if (!parent) return;
+      const frag = document.createDocumentFragment();
+      nodes.forEach((n) => frag.appendChild(n));
+      parent.replaceChild(frag, target);
+      break;
+    }
+    case "textContent":
+      target.textContent = html;
+      break;
+    case "beforebegin":
+      nodes.forEach((node) => target.parentNode.insertBefore(node, target));
+      break;
+    case "afterbegin":
+      nodes
+        .slice()
+        .reverse()
+        .forEach((node) => target.insertBefore(node, target.firstChild));
+      break;
+    case "beforeend":
+      nodes.forEach((node) => target.appendChild(node));
+      break;
+    case "afterend":
+      nodes
+        .slice()
+        .reverse()
+        .forEach((node) =>
+          target.parentNode.insertBefore(node, target.nextSibling),
+        );
+      break;
+    case "delete":
+      target.remove();
+      break;
+    case "none":
+      break;
+    default:
+      target.replaceChildren(...nodes);
+      break;
+  }
+}
+/**
+ * Creates an HTTP directive factory that supports GET, DELETE, POST, PUT.
+ *
+ * @param {"get" | "delete" | "post" | "put"} method - HTTP method to use.
+ * @param {string} attrName - Attribute name containing the URL.
+ * @returns {import('../../interface.ts').DirectiveFactory}
+ */
+export function createHttpDirective(method, attrName) {
+  /**
+   * @param {{ [key: string]: Function }} $http
+   * @param {import("../../core/compile/compile.js").CompileFn} $compile
+   * @param {import("../../services/log.js").LogService} $log
+   * @returns {import('../../interface.ts').Directive}
+   */
+  return function ($http, $compile, $log) {
+    /**
+     * Collects form data from the element or its associated form.
+     *
+     * @param {HTMLElement} element
+     * @returns {Object<string, any>}
+     */
+    function collectFormData(element) {
+      /** @type {HTMLFormElement | null} */
+      let form = null;
+      const tag = element.tagName.toLowerCase();
+      if (tag === "form") {
+        /** @type {HTMLFormElement} */
+        form = /** @type {HTMLFormElement} */ (element);
+      } else if ("form" in element && element.form) {
+        /** @type {HTMLFormElement} */
+        form = /** @type {HTMLFormElement} */ (element.form);
+      } else if (element.hasAttribute("form")) {
+        const formId = element.getAttribute("form");
+        if (formId) {
+          /** @type {HTMLElement | null} */
+          const maybeForm = document.getElementById(formId);
+          if (maybeForm && maybeForm.tagName.toLowerCase() === "form") {
+            form = /** @type {HTMLFormElement} */ (maybeForm);
+          }
+        }
+      }
+      if (!form) {
+        if (
+          "name" in element &&
+          typeof element.name === "string" &&
+          element.name.length > 0
+        ) {
+          if (
+            element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement ||
+            element instanceof HTMLSelectElement
+          ) {
+            const key = element.name;
+            const value = element.value;
+            return { [key]: value };
+          }
+        }
+        return {};
+      }
+      const formData = new FormData(form);
+      const data = {};
+      formData.forEach((value, key) => {
+        data[key] = value;
+      });
+      return data;
+    }
+    return {
+      restrict: "A",
+      terminal: true,
+      link(scope, element, attrs) {
+        /** @type {EventType} */
+        const eventName = getEventNameForElement(element);
+        const tag = element.tagName.toLowerCase();
+        element.addEventListener(eventName, (event) => {
+          if (/** @type {HTMLButtonElement} */ (element).disabled) return;
+          if (tag === "form") event.preventDefault();
+          const swap = element.dataset.swap || "innerHTML";
+          const targetSelector = element.dataset.target;
+          const target = targetSelector
+            ? document.querySelector(targetSelector)
+            : element;
+          if (!target) {
+            $log.warn(`${attrName}: target "${targetSelector}" not found`);
+            return;
+          }
+          const url = attrs[attrName];
+          if (!url) {
+            $log.warn(`${attrName}: no URL specified`);
+            return;
+          }
+          const handler = (res) => {
+            const html = res.data;
+            handleSwapResponse(
+              html,
+              /** @type {import("../../interface.ts").SwapInsertPosition} */ (
+                swap
+              ),
+              target,
+              scope,
+              $compile,
+            );
+          };
+          if (method === "post" || method === "put") {
+            const data = collectFormData(element);
+            $http[method](url, data).then(handler).catch(handler);
+          } else {
+            $http[method](url).then(handler).catch(handler);
+          }
+        });
+      },
+    };
+  };
+}

package/src/directive/http/http.test.js ADDED Viewed

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

package/src/directive/http/post-example.html ADDED Viewed

@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS</title>
+    <link rel="shortcut icon" type="image/png" href="images/favicon.ico" />
+    <script type="module" src="/src/index.js"></script>
+  </head>
+  <body ng-app>
+    InnerHTML
+    <form ng-post="/mock/posthtml">
+      <input name="name" />
+      <button type="submit">Test</button>
+    </form>
+    Target
+    <form ng-post="/mock/posthtml" data-target="#output">
+      <input name="name" />
+      <button type="submit">Test</button>
+    </form>
+    <div id="output"></div>
+    Target
+    <form ng-post="/mock/posthtml" data-target="#output">
+      <input name="name" />
+      <button type="submit">Test</button>
+    </form>
+    <div id="output"></div>
+  </body>
+</html>

package/src/directive/http/post.spec.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { Angular } from "../../loader.js";
+// import { browserTrigger, wait } from "../../shared/test-utils.js";
+describe("ngPost", () => {
+  let $compile, $rootScope, $httpBackend, el;
+  beforeEach(() => {
+    el = document.getElementById("app");
+    el.innerHTML = "";
+    let angular = new Angular();
+    angular.module("default", []);
+    angular
+      .bootstrap(el, ["default"])
+      .invoke((_$compile_, _$rootScope_, _$httpBackend_) => {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $httpBackend = _$httpBackend_;
+      });
+  });
+  it("should pass", () => {
+    expect(true).toBeTrue();
+  });
+});

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

@@ -0,0 +1,24 @@
+import { Angular } from "../../loader.js";
+// import { browserTrigger, wait } from "../../shared/test-utils.js";
+describe("ngPut", () => {
+  let $compile, $rootScope, $httpBackend, el;
+  beforeEach(() => {
+    el = document.getElementById("app");
+    el.innerHTML = "";
+    let angular = new Angular();
+    angular.module("default", []);
+    angular
+      .bootstrap(el, ["default"])
+      .invoke((_$compile_, _$rootScope_, _$httpBackend_) => {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $httpBackend = _$httpBackend_;
+      });
+  });
+  it("should pass", () => {
+    expect(true).toBeTrue();
+  });
+});

package/src/directive/if/if.js CHANGED Viewed

@@ -3,8 +3,6 @@ import { hasAnimate } from "../../shared/utils.js";
 ngIfDirective.$inject = ["$animate"];
 /**
- *
- * TODO // Add type for animate service
  * @param {*}  $animate
  * @returns {import("../../interface.ts").Directive}
  */

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

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

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

@@ -1,9 +1,5 @@
 import { defaultModelOptions } from "./model-options.js";
-import {
-  createElementFromHTML,
-  dealoc,
-  getController,
-} from "../../shared/dom.js";
+import { dealoc, getController } from "../../shared/dom.js";
 import { Angular } from "../../loader.js";
 import { bootstrap, wait } from "../../shared/test-utils.js";

package/src/directive/repeat/repeat.spec.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Angular } from "../../loader.js";
-import { createElementFromHTML, dealoc, getScope } from "../../shared/dom.js";
+import { createElementFromHTML, dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";
 describe("ngRepeat", () => {

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

@@ -6,7 +6,7 @@ describe("setter", () => {
   beforeEach(() => {
     window.angular = new Angular();
-    angular.module("myModule", ["ng"]);
+    angular.module("myModule", []);
     angular
       .bootstrap(document.getElementById("app"), ["myModule"])
       .invoke((_$compile_, _$rootScope_, _$parse_, _$log_) => {

package/src/directive/style/style.js CHANGED Viewed

@@ -4,7 +4,7 @@
 export function ngStyleDirective() {
   return {
     restrict: "A",
-    link: (scope, element, attr) => {
+    link(scope, element, attr) {
       let oldStyles;
       scope.$watch(attr["ngStyle"], (newStyles) => {
         if (oldStyles) {

package/src/interface.ts CHANGED Viewed

@@ -2,11 +2,13 @@ import { Attributes } from "./core/compile/attributes.js";
 import { Scope } from "./core/scope/scope.js";
 /**
- * A JavaScript expression represented as a string.
+ * A JavaScript expression represented as a string, typically used in interpolation bindings.
+ *
+ * Example:
+ * ```html
+ * <span title="{{ attrBinding }}">{{ textBinding }}</span>
+ * ```
  *
- * Often used in interpolation bindings such as:
- * `<span title="{{ attrBinding }}">{{ textBinding }}</span>`.
- * Evaluated in the context of a {@link import('./core/scope/scope.js').Scope `scope`} object.
  */
 export type Expression = string;
@@ -327,3 +329,14 @@ export interface NgModelController {
   /** Current value shown in the view */
   $viewValue: any;
 }
+/**
+ * Possible values for `data-swap` attribute
+ */
+export type SwapInsertPosition =
+  | InsertPosition
+  | "textContent"
+  | "innerHTML"
+  | "outerHTML"
+  | "delete"
+  | "none";

package/src/loader.js CHANGED Viewed

@@ -15,8 +15,7 @@ import {
 import { annotate, createInjector } from "./core/di/injector.js";
 import { NgModule } from "./core/di/ng-module.js";
 import { Cache } from "./core/cache/cache.js";
-import { publishExternalAPI } from "./public.js";
-import { VERSION } from "./public.js";
+import { registerNgModule } from "./public.js";
 import { unnestR } from "./shared/common.js";
 import { EventBus } from "./core/pubsub/pubsub.js";
 import { $injectTokens } from "./injection-tokens.js";
@@ -38,16 +37,16 @@ export class Angular {
   constructor() {
     Cache.clear(); // a ensure new instance of angular gets a clean cache
-    /** @type {Map<number, import("./core/cache/cache").ExpandoStore>} */
-    this.Cache = Cache;
+    /** @type {Map<number, import("./core/cache/cache.js").ExpandoStore>} */
+    this.$cache = Cache;
     /** @type {import('./core/pubsub/pubsub.js').PubSub} */
-    this.EventBus = EventBus;
+    this.$eventBus = EventBus;
     /**
      * @type {string} `version` from `package.json`
      */
-    this.version = VERSION;
+    this.version = "[VI]{version}[/VI]"; //inserted via rollup plugin
     /** @type {!Array<string|any>} */
     this.bootsrappedModules = [];
@@ -59,7 +58,7 @@ export class Angular {
     window["angular"] = this;
     this.$injectTokens = $injectTokens;
-    publishExternalAPI(this);
+    registerNgModule(this);
   }
   /**

package/src/loader.spec.js CHANGED Viewed

@@ -166,35 +166,4 @@ describe("module loader", () => {
       angular.module("hasOwnProperty", []);
     }).toThrow();
   });
-  describe("Module", () => {
-    describe("info()", () => {
-      let theModule;
-      beforeEach(() => {
-        theModule = angular.module("theModule", []);
-      });
-      it("should default to an empty object", () => {
-        expect(theModule.info()).toEqual({});
-      });
-      it("should store the object passed as a param", () => {
-        theModule.info({ version: "1.2" });
-        expect(theModule.info()).toEqual({ version: "1.2" });
-      });
-      it("should throw if the parameter is not an object", () => {
-        expect(() => {
-          theModule.info("some text");
-        }).toThrow();
-      });
-      it("should completely replace the previous info object", () => {
-        theModule.info({ value: "X" });
-        theModule.info({ newValue: "Y" });
-        expect(theModule.info()).toEqual({ newValue: "Y" });
-      });
-    });
-  });
 });

package/src/public.js CHANGED Viewed

@@ -1,4 +1,3 @@
-// @private
 import { CompileProvider } from "./core/compile/compile.js";
 import {
   inputDirective,
@@ -129,15 +128,19 @@ import {
 import { ngChannelDirective } from "./directive/channel/channel.js";
 import { ngSetterDirective } from "./directive/setter/setter.js";
 import { PubSubProvider } from "./core/pubsub/pubsub.js";
-export const VERSION = "[VI]{version}[/VI]";
+import {
+  ngDeleteDirective,
+  ngGetDirective,
+  ngPostDirective,
+  ngPutDirective,
+} from "./directive/http/http.js";
 /**
  * Initializes core `ng` module.
  * @param {import('./loader.js').Angular} angular
  * @returns {import('./core/di/ng-module.js').NgModule} `ng` module
  */
-export function publishExternalAPI(angular) {
+export function registerNgModule(angular) {
   const ng = angular
     .module(
       "ng",
@@ -167,8 +170,10 @@ export function publishExternalAPI(angular) {
               ngClassOdd: ngClassOddDirective,
               ngCloak: ngCloakDirective,
               ngController: ngControllerDirective,
+              ngDelete: ngDeleteDirective,
               ngDisabled: ngDisabledAriaDirective,
               ngForm: ngFormDirective,
+              ngGet: ngGetDirective,
               ngHide: ngHideDirective,
               ngIf: ngIfDirective,
               ngInclude: ngIncludeDirective,
@@ -179,6 +184,8 @@ export function publishExternalAPI(angular) {
               ngMessagesInclude: ngMessagesIncludeDirective,
               ngMessageDefault: ngMessageDefaultDirective,
               ngNonBindable: ngNonBindableDirective,
+              ngPost: ngPostDirective,
+              ngPut: ngPutDirective,
               ngRef: ngRefDirective,
               ngRepeat: ngRepeatDirective,
               ngSetter: ngSetterDirective,
@@ -283,8 +290,7 @@ export function publishExternalAPI(angular) {
         return globals.params;
       },
     ])
-    .value("$trace", trace)
-    .info({ version: VERSION });
+    .value("$trace", trace);
   return ng;
 }

package/src/services/http-backend/http-backend.js CHANGED Viewed

@@ -146,8 +146,10 @@ export function createHttpBackend($browser) {
     // http.timeout = promise             abort
     // xhr.abort()                        abort (The xhr object is normally inaccessible, but
     //                                    can be exposed with the xhrFactory)
+    /** @type {number} */
+    let timeoutId;
     if (timeout > 0) {
-      var timeoutId = setTimeout(() => {
+      timeoutId = setTimeout(() => {
         timeoutRequest("timeout");
       }, timeout);
     } else if (isPromiseLike(timeout)) {

package/src/shared/common.js CHANGED Viewed

@@ -139,12 +139,6 @@ export const pushTo = curry((arr, val) => {
   return val;
 });
-/** Given an array of (deregistration) functions, calls all functions and removes each one from the source array */
-export const deregAll = (functions) =>
-  functions.slice().forEach((fn) => {
-    typeof fn === "function" && fn();
-    removeFrom(functions, fn);
-  });
 /**
  * Applies a set of defaults to an options object.  The options object is filtered
  * to only those properties of the objects in the defaultsList.
@@ -312,17 +306,7 @@ export const uniqR = (acc, token) =>
  * ```
  */
 export const unnest = (arr) => arr.reduce(unnestR, []);
-/**
- * Return a completely flattened version of an array.
- *
- * @example
- * ```
- *
- * let input = [ [ "a", "b" ], [ "c", "d" ], [ [ "double", "nested" ] ] ];
- * flatten(input) // [ "a", "b", "c", "d", "double, "nested" ]
- * ```
- */
-export const flatten = (arr) => arr.reduce(flattenR, []);
 /**
  * Given a .filter Predicate, builds a .filter Predicate which throws an error if any elements do not pass.
  * @example
@@ -337,23 +321,7 @@ export const flatten = (arr) => arr.reduce(flattenR, []);
  * ```
  */
 export const assertPredicate = assertFn;
-/**
- * Given a .map function, builds a .map function which throws an error if any mapped elements do not pass a truthyness test.
- * @example
- * ```
- *
- * var data = { foo: 1, bar: 2 };
- *
- * let keys = [ 'foo', 'bar' ]
- * let values = keys.map(assertMap(key => data[key], "Key not found"));
- * // values is [1, 2]
- *
- * let keys = [ 'foo', 'bar', 'baz' ]
- * let values = keys.map(assertMap(key => data[key], "Key not found"));
- * // throws Error("Key not found")
- * ```
- */
-export const assertMap = assertFn;
 export function assertFn(predicateOrMap, errMsg = "assert failure") {
   return (obj) => {
     const result = predicateOrMap(obj);
@@ -444,10 +412,17 @@ export function applyPairs(memo, keyValTuple) {
   memo[key] = value;
   return memo;
 }
-/** Get the last element of an array */
+/**
+ * Returns the last element of an array, or undefined if the array is empty.
+ * @template T
+ * @param {T[]} arr - The input array.
+ * @returns {T | undefined} The last element or undefined.
+ */
 export function tail(arr) {
-  return (arr.length && arr[arr.length - 1]) || undefined;
+  return arr.length > 0 ? arr[arr.length - 1] : undefined;
 }
 /**
  * shallow copy from src to dest
  */