@angular-wave/angular.ts 0.9.4 → 0.9.6

package/src/router/template-factory.js

@@ -1,249 +0,0 @@
-import { isDefined, isFunction, isObject } from "../shared/utils.js";
-import { tail, unnestR } from "../shared/common.js";
-import { Resolvable } from "./resolve/resolvable.js";
-import { kebobString } from "../shared/strings.js";
-import { annotate } from "../core/di/injector.js";
-import { DirectiveSuffix } from "../core/compile/compile.js";
-import { $injectTokens as $t } from "../injection-tokens.js";
-
-/**
- * @typedef BindingTuple
- * @property {string} name
- * @property {string} type
- */
-
-/**
- * Service which manages loading of templates from a ViewConfig.
- */
-export class TemplateFactoryProvider {
-  constructor() {
-    /** @type {boolean} */
-    this._useHttp = false;
-  }
-
-  $get = [
-    $t.$http,
-    $t.$templateCache,
-    $t.$templateRequest,
-    $t.$injector,
-    /**
-     * @param {import("interface.ts").HttpService} $http
-     * @param {ng.TemplateCacheService} $templateCache
-     * @param {any} $templateRequest
-     * @param {import("../core/di/internal-injector.js").InjectorService} $injector
-     * @returns
-     */
-    ($http, $templateCache, $templateRequest, $injector) => {
-      this.$templateRequest = $templateRequest;
-      this.$http = $http;
-      this.$templateCache = $templateCache;
-      this.$injector = $injector;
-      return this;
-    },
-  ];
-
-  /**
-   * Forces the provider to use $http service directly
-   * @param {boolean} value
-   */
-  useHttpService(value) {
-    this._useHttp = value;
-  }
-
-  /**
-   * Creates a template from a configuration object.
-   *
-   * @param config Configuration object for which to load a template.
-   * The following properties are search in the specified order, and the first one
-   * that is defined is used to create the template:
-   *
-   * @param {any} config
-   * @param {any} params  Parameters to pass to the template function.
-   * @param {import("./resolve/resolve-context.js").ResolveContext} context The resolve context associated with the template's view
-   *
-   * @return {string|object}  The template html as a string, or a promise for
-   * that string,or `null` if no template is configured.
-   */
-  fromConfig(config, params, context) {
-    const defaultTemplate = "<ng-view></ng-view>";
-    const asTemplate = (result) =>
-      Promise.resolve(result).then((str) => ({ template: str }));
-    const asComponent = (result) =>
-      Promise.resolve(result).then((str) => ({ component: str }));
-
-    const getConfigType = (config) => {
-      if (isDefined(config.template)) return "template";
-      if (isDefined(config.templateUrl)) return "templateUrl";
-      if (isDefined(config.templateProvider)) return "templateProvider";
-      if (isDefined(config.component)) return "component";
-      if (isDefined(config.componentProvider)) return "componentProvider";
-      return "default";
-    };
-
-    switch (getConfigType(config)) {
-      case "template":
-        return asTemplate(this.fromString(config.template, params));
-      case "templateUrl":
-        return asTemplate(this.fromUrl(config.templateUrl, params));
-      case "templateProvider":
-        return asTemplate(
-          this.fromProvider(config.templateProvider, params, context),
-        );
-      case "component":
-        return asComponent(config.component);
-      case "componentProvider":
-        return asComponent(
-          this.fromComponentProvider(config.componentProvider, context),
-        );
-      default:
-        return asTemplate(defaultTemplate);
-    }
-  }
-  /**
-   * Creates a template from a string or a function returning a string.
-   *
-   * @param {string | Function} template html template as a string or function that returns an html template as a string.
-   * @param {any} [params] Parameters to pass to the template function.
-   *
-   * @return {string|object} The template html as a string, or a promise for that
-   * string.
-   */
-  fromString(template, params) {
-    return isFunction(template)
-      ? /** @type {Function} */ (template)(params)
-      : template;
-  }
-  /**
-   * Loads a template from the a URL via `$http` and `$templateCache`.
-   *
-   * @param {string|Function} url url of the template to load, or a function
-   * that returns a url.
-   * @param {Object} params Parameters to pass to the url function.
-   * @return {string|Promise.<string>} The template html as a string, or a promise
-   * for that string.
-   */
-  fromUrl(url, params) {
-    if (isFunction(url)) url = /** @type {Function} */ (url)(params);
-    if (url == null) return null;
-    if (this._useHttp) {
-      return this.$http
-        .get(/** @type {string} */ (url), {
-          cache: this.$templateCache,
-          headers: { Accept: "text/html" },
-        })
-        .then(function (response) {
-          return response.data;
-        });
-    }
-    return this.$templateRequest(url);
-  }
-  /**
-   * Creates a template by invoking an injectable provider function.
-   *
-   * @param {import('../interface.ts').Injectable<any>} provider Function to invoke via `locals`
-   * @param {Function} params a function used to invoke the template provider
-   * @param {import("./resolve/resolve-context.js").ResolveContext} context
-   * @return {string|Promise.<string>} The template html as a string, or a promise
-   * for that string.
-   */
-  fromProvider(provider, params, context) {
-    const deps = annotate(provider);
-    const providerFn = Array.isArray(provider) ? tail(provider) : provider;
-    const resolvable = new Resolvable("", providerFn, deps);
-    return resolvable.get(context);
-  }
-  /**
-   * Creates a component's template by invoking an injectable provider function.
-   *
-   * @param {import('../interface.ts').Injectable<any>} provider Function to invoke via `locals`
-   * @return {Promise<any>} The template html as a string: "<component-name input1='::$resolve.foo'></component-name>".
-   */
-  fromComponentProvider(provider, context) {
-    const deps = annotate(provider);
-    const providerFn = Array.isArray(provider) ? tail(provider) : provider;
-    const resolvable = new Resolvable("", providerFn, deps);
-    return resolvable.get(context); // https://github.com/angular-ui/ui-router/pull/3165/files
-  }
-  /**
-   * Creates a template from a component's name
-   *
-   * This implements route-to-component.
-   * It works by retrieving the component (directive) metadata from the injector.
-   * It analyses the component's bindings, then constructs a template that instantiates the component.
-   * The template wires input and output bindings to resolves or from the parent component.
-   *
-   * @param {any} ngView {object} The parent ng-view (for binding outputs to callbacks)
-   * @param {import("./resolve/resolve-context.js").ResolveContext} context The ResolveContext (for binding outputs to callbacks returned from resolves)
-   * @param {string} component {string} Component's name in camel case.
-   * @param {any} [bindings] An object defining the component's bindings: {foo: '<'}
-   * @return {string} The template as a string: "<component-name input1='$resolve.foo'></component-name>".
-   */
-  makeComponentTemplate(ngView, context, component, bindings) {
-    bindings = bindings || {};
-    // Bind once prefix
-    // Convert to kebob name. Add x- prefix if the string starts with `x-` or `data-`
-    const kebob = (camelCase) => {
-      const kebobed = kebobString(camelCase);
-      return /^(x|data)-/.exec(kebobed) ? `x-${kebobed}` : kebobed;
-    };
-
-    const attributeTpl = /** @param {BindingTuple} input*/ (input) => {
-      const { name, type } = input;
-      const attrName = kebob(name);
-      // If the ng-view has an attribute which matches a binding on the routed component
-      // then pass that attribute through to the routed component template.
-      // Prefer ng-view wired mappings to resolve data, unless the resolve was explicitly bound using `bindings:`
-      if (ngView.getAttribute(attrName) && !bindings[name])
-        return `${attrName}='${ngView.getAttribute(attrName)}'`;
-      const resolveName = bindings[name] || name;
-      // Pre-evaluate the expression for "@" bindings by enclosing in {{ }}
-      // some-attr="{{$resolve.someResolveName }}"
-      if (type === "@") return `${attrName}='{{s$resolve.${resolveName}}}'`;
-      // Wire "&" callbacks to resolves that return a callback function
-      // Get the result of the resolve (should be a function) and annotate it to get its arguments.
-      // some-attr="$resolve.someResolveResultName(foo, bar)"
-      if (type === "&") {
-        const res = context.getResolvable(resolveName);
-        const fn = res && res.data;
-        const args = (fn && annotate(fn)) || [];
-        // account for array style injection, i.e., ['foo', function(foo) {}]
-        const arrayIdxStr = Array.isArray(fn) ? `[${fn.length - 1}]` : "";
-        return `${attrName}='$resolve.${resolveName}${arrayIdxStr}(${args.join(",")})'`;
-      }
-      // some-attr="::$resolve.someResolveName"
-      return `${attrName}='$resolve.${resolveName}'`;
-    };
-    const attrs = getComponentBindings(this.$injector, component)
-      .map(attributeTpl)
-      .join(" ");
-    const kebobName = kebob(component);
-    return `<${kebobName} ${attrs}></${kebobName}>`;
-  }
-}
-
-/**
- * Gets all the directive(s)' inputs ('@', '=', and '<') and outputs ('&')
- */
-function getComponentBindings($injector, name) {
-  const cmpDefs = $injector.get(name + DirectiveSuffix); // could be multiple
-  if (!cmpDefs || !cmpDefs.length)
-    throw new Error(`Unable to find component named '${name}'`);
-  return cmpDefs.map(getBindings).reduce(unnestR, []);
-}
-// Given a directive definition, find its object input attributes
-// Use different properties, depending on the type of directive (component, bindToController, normal)
-const getBindings = (def) => {
-  if (isObject(def.bindToController))
-    return scopeBindings(def.bindToController);
-  return scopeBindings(def.scope);
-};
-// for ng 1.2 style, process the scope: { input: "=foo" }
-// for ng 1.3 through ng 1.5, process the component's bindToController: { input: "=foo" } object
-const scopeBindings = (bindingsObj) =>
-  Object.keys(bindingsObj || {})
-    // [ 'input', [ '=foo', '=', 'foo' ] ]
-    .map((key) => [key, /^([=<@&])[?]?(.*)/.exec(bindingsObj[key])])
-    // skip malformed values
-    .filter((tuple) => isDefined(tuple) && Array.isArray(tuple[1]))
-    // { name: ('foo' || 'input'), type: '=' }
-    .map((tuple) => ({ name: tuple[1][2] || tuple[0], type: tuple[1][1] }));

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

@@ -1,146 +0,0 @@
-import { dealoc } from "../shared/dom.js";
-import { Angular } from "../angular.js";
-import { wait } from "../shared/test-utils.js";
-
-describe("templateFactory", () => {
-  let $injector,
-    $templateFactory,
-    $sce,
-    $scope,
-    $compile,
-    $stateRegistry,
-    $stateService,
-    error;
-
-  beforeEach(() => {
-    dealoc(document.getElementById("app"));
-    window.angular = new Angular();
-    window.angular
-      .module("defaultModule", [])
-      .decorator("$exceptionHandler", () => {
-        return (exception) => {
-          error = exception.message;
-        };
-      });
-    $injector = window.angular.bootstrap(document.getElementById("app"), [
-      "defaultModule",
-    ]);
-    $injector.invoke((_$templateFactory_, _$sce_, $rootScope) => {
-      $templateFactory = _$templateFactory_;
-      $sce = _$sce_;
-      $scope = $rootScope;
-    });
-  });
-
-  it("exists", () => {
-    expect($injector.get("$templateFactory")).toBeDefined();
-  });
-
-  describe("should follow $sce policy and", () => {
-    it("accepts relative URLs", async () => {
-      let res = $templateFactory.fromUrl("/mock/hello");
-      await wait(100);
-      expect(await res).toEqual("Hello");
-    });
-
-    it("rejects untrusted URLs", async () => {
-      try {
-        await $templateFactory.fromUrl("http://evil.com/views/view.html");
-      } catch (e) {}
-      expect(error).toMatch(/sce:insecurl/);
-    });
-
-    it("accepts explicitly trusted URLs", () => {
-      expect(() => {
-        $templateFactory.fromUrl(
-          $sce.trustAsResourceUrl("http://evil.com/views/view.html"),
-        );
-      }).not.toThrowError();
-    });
-  });
-
-  describe("templateFactory with forced use of $http service", () => {
-    beforeEach(() => {
-      dealoc(document.getElementById("app"));
-      let module = window.angular.module("defaultModule", []);
-      module.config(function ($templateFactoryProvider) {
-        $templateFactoryProvider.useHttpService(true);
-      });
-      $injector = window.angular.bootstrap(document.getElementById("app"), [
-        "defaultModule",
-      ]);
-      $injector.invoke((_$templateFactory_, _$sce_, $rootScope) => {
-        $templateFactory = _$templateFactory_;
-        $sce = _$sce_;
-        $scope = $rootScope;
-      });
-    });
-
-    it("does not restrict URL loading", function () {
-      expect(() => {
-        $templateFactory.fromUrl("http://evil.com/views/view.html");
-      }).not.toThrowError();
-
-      expect(() => {
-        $templateFactory.fromUrl("data:text/html,foo");
-      }).not.toThrowError();
-    });
-  });
-
-  describe("component template builder", () => {
-    let el;
-
-    beforeEach(() => {
-      dealoc(document.getElementById("app"));
-      const mod = angular.module("defaultModule", []);
-      mod.component("myComponent", { template: "hi" });
-      mod.component("dataComponent", { template: "hi" });
-      mod.component("xComponent", { template: "hi" });
-      $injector = window.angular.bootstrap(document.getElementById("app"), [
-        "defaultModule",
-      ]);
-      $injector.invoke(
-        (
-          _$templateFactory_,
-          _$sce_,
-          $rootScope,
-          _$stateRegistry_,
-          _$state_,
-          _$compile_,
-        ) => {
-          $templateFactory = _$templateFactory_;
-          $sce = _$sce_;
-          $scope = $rootScope;
-          $stateRegistry = _$stateRegistry_;
-          $stateService = _$state_;
-          $compile = _$compile_;
-        },
-      );
-      el = $compile("<div><ng-view></ng-view></div>")($scope.$new());
-    });
-
-    it("should not prefix the components dom element with anything", async () => {
-      $stateRegistry.register({ name: "cmp", component: "myComponent" });
-      $stateService.go("cmp");
-      await wait(100);
-      expect(el.innerHTML).toMatch(/\<my-component/);
-    });
-
-    it("should prefix the components dom element with x- for components named dataFoo", async () => {
-      $stateRegistry.register({
-        name: "cmp",
-        component: "dataComponent",
-      });
-      $stateService.go("cmp");
-      await wait();
-      expect(el.innerHTML).toMatch(/\<x-data-component/);
-    });
-
-    it("should prefix the components dom element with x- for components named xFoo", async () => {
-      $stateRegistry.register({ name: "cmp", component: "xComponent" });
-      $stateService.go("cmp");
-      await wait();
-      expect(el.innerHTML).toMatch(/\<x-x-component/);
-    });
-  });
-});

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

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

package/src/router/transition/hook-builder.js

@@ -1,137 +0,0 @@
-import { assertPredicate, unnestR } from "../../shared/common.js";
-import { TransitionHookPhase, TransitionHookScope } from "./interface.js";
-import { TransitionHook } from "./transition-hook.js";
-
-/**
- * This class returns applicable TransitionHooks for a specific Transition instance.
- *
- * Hooks ([[RegisteredHook]]) may be registered globally, e.g., $transitions.onEnter(...), or locally, e.g.
- * myTransition.onEnter(...).  The HookBuilder finds matching RegisteredHooks (where the match criteria is
- * determined by the type of hook)
- *
- * The HookBuilder also converts RegisteredHooks objects to TransitionHook objects, which are used to run a Transition.
- *
- * The HookBuilder constructor is given the $transitions service and a Transition instance.  Thus, a HookBuilder
- * instance may only be used for one specific Transition object. (side note: the _treeChanges accessor is private
- * in the Transition class, so we must also provide the Transition's _treeChanges)
- */
-export class HookBuilder {
-  /**
-   * @param {import("./transition.js").Transition} transition
-   */
-  constructor(transition) {
-    this.transition = transition;
-  }
-
-  /**
-   * @param {TransitionHookPhase} phase
-   * @returns
-   */
-  buildHooksForPhase(phase) {
-    return this.transition.transitionService
-      ._getEvents(phase)
-      .map((type) => this.buildHooks(type))
-      .reduce(unnestR, [])
-      .filter(Boolean);
-  }
-
-  /**
-   * Returns an array of newly built TransitionHook objects.
-   *
-   * - Finds all RegisteredHooks registered for the given `hookType` which matched the transition's [[TreeChanges]].
-   * - Finds [[PathNode]] (or `PathNode[]`) to use as the TransitionHook context(s)
-   * - For each of the [[PathNode]]s, creates a TransitionHook
-   *
-   * @param hookType the type of the hook registration function, e.g., 'onEnter', 'onFinish'.
-   */
-  buildHooks(hookType) {
-    const transition = this.transition;
-    const treeChanges = transition.treeChanges();
-    // Find all the matching registered hooks for a given hook type
-    const matchingHooks = this.getMatchingHooks(
-      hookType,
-      treeChanges,
-      transition,
-    );
-    if (!matchingHooks) return [];
-    const baseHookOptions = {
-      transition: transition,
-      current: transition.options().current,
-    };
-    const makeTransitionHooks = (hook) => {
-      // Fetch the Nodes that caused this hook to match.
-      const matches = hook.matches(treeChanges, transition);
-      // Select the PathNode[] that will be used as TransitionHook context objects
-      const matchingNodes = matches[hookType.criteriaMatchPath.name];
-      // Return an array of HookTuples
-      return matchingNodes.map((node) => {
-        const _options = Object.assign(
-          {
-            bind: hook.bind,
-            traceData: { hookType: hookType.name, context: node },
-          },
-          baseHookOptions,
-        );
-        const state =
-          hookType.criteriaMatchPath.scope === TransitionHookScope.STATE
-            ? node.state.self
-            : null;
-        const transitionHook = new TransitionHook(
-          transition,
-          state,
-          hook,
-          _options,
-        );
-        return { hook, node, transitionHook };
-      });
-    };
-    return matchingHooks
-      .map(makeTransitionHooks)
-      .reduce(unnestR, [])
-      .sort(tupleSort(hookType.reverseSort))
-      .map((tuple) => tuple.transitionHook);
-  }
-  /**
-   * Finds all RegisteredHooks from:
-   * - The Transition object instance hook registry
-   * - The TransitionService ($transitions) global hook registry
-   *
-   * which matched:
-   * - the eventType
-   * - the matchCriteria (to, from, exiting, retained, entering)
-   *
-   * @returns an array of matched [[RegisteredHook]]s
-   */
-  getMatchingHooks(hookType, treeChanges, transition) {
-    const isCreate = hookType.hookPhase === TransitionHookPhase.CREATE;
-    // Instance and Global hook registries
-    const $transitions = this.transition.transitionService;
-    const registries = isCreate
-      ? [$transitions]
-      : [this.transition, $transitions];
-    return registries
-      .map((reg) => reg.getHooks(hookType.name)) // Get named hooks from registries
-      .filter(
-        assertPredicate(Array.isArray, `broken event named: ${hookType.name}`),
-      ) // Sanity check
-      .reduce(unnestR, []) // Un-nest RegisteredHook[][] to RegisteredHook[] array
-      .filter((hook) => hook.matches(treeChanges, transition)); // Only those satisfying matchCriteria
-  }
-}
-/**
- * A factory for a sort function for HookTuples.
- *
- * The sort function first compares the PathNode depth (how deep in the state tree a node is), then compares
- * the EventHook priority.
- *
- * @param reverseDepthSort a boolean, when true, reverses the sort order for the node depth
- * @returns a tuple sort function
- */
-function tupleSort(reverseDepthSort = false) {
-  return function nodeDepthThenPriority(l, r) {
-    const factor = reverseDepthSort ? -1 : 1;
-    const depthDelta =
-      (l.node.state.path.length - r.node.state.path.length) * factor;
-    return depthDelta !== 0 ? depthDelta : r.hook.priority - l.hook.priority;
-  };
-}