@angular-wave/angular.ts 0.0.11 → 0.0.12

package/src/router/adapter/stateProvider.js

@@ -0,0 +1,137 @@
+/** @publicapi @module ng1 */ /** */
+
+import { val } from "../core/common/hof";
+import { createProxyFunctions } from "../core/common/common";
+import { isObject } from "../../core/utils";
+/**
+ * The Angular 1 `StateProvider`
+ *
+ * The `$stateProvider` works similar to Angular's v1 router, but it focuses purely
+ * on state.
+ *
+ * A state corresponds to a "place" in the application in terms of the overall UI and
+ * navigation. A state describes (via the controller / template / view properties) what
+ * the UI looks like and does at that place.
+ *
+ * States often have things in common, and the primary way of factoring out these
+ * commonalities in this model is via the state hierarchy, i.e. parent/child states aka
+ * nested states.
+ *
+ * The `$stateProvider` provides interfaces to declare these states for your app.
+ */
+export class StateProvider {
+  constructor(stateRegistry, stateService) {
+    this.stateRegistry = stateRegistry;
+    this.stateService = stateService;
+    createProxyFunctions(val(StateProvider.prototype), this, val(this));
+  }
+  /**
+   * Decorates states when they are registered
+   *
+   * Allows you to extend (carefully) or override (at your own peril) the
+   * `stateBuilder` object used internally by [[StateRegistry]].
+   * This can be used to add custom functionality to ui-router,
+   * for example inferring templateUrl based on the state name.
+   *
+   * When passing only a name, it returns the current (original or decorated) builder
+   * function that matches `name`.
+   *
+   * The builder functions that can be decorated are listed below. Though not all
+   * necessarily have a good use case for decoration, that is up to you to decide.
+   *
+   * In addition, users can attach custom decorators, which will generate new
+   * properties within the state's internal definition. There is currently no clear
+   * use-case for this beyond accessing internal states (i.e. $state.$current),
+   * however, expect this to become increasingly relevant as we introduce additional
+   * meta-programming features.
+   *
+   * **Warning**: Decorators should not be interdependent because the order of
+   * execution of the builder functions in non-deterministic. Builder functions
+   * should only be dependent on the state definition object and super function.
+   *
+   *
+   * Existing builder functions and current return values:
+   *
+   * - **parent** `{object}` - returns the parent state object.
+   * - **data** `{object}` - returns state data, including any inherited data that is not
+   *   overridden by own values (if any).
+   * - **url** `{object}` - returns a {@link ui.router.util.type:UrlMatcher UrlMatcher}
+   *   or `null`.
+   * - **navigable** `{object}` - returns closest ancestor state that has a URL (aka is
+   *   navigable).
+   * - **params** `{object}` - returns an array of state params that are ensured to
+   *   be a super-set of parent's params.
+   * - **views** `{object}` - returns a views object where each key is an absolute view
+   *   name (i.e. "viewName@stateName") and each value is the config object
+   *   (template, controller) for the view. Even when you don't use the views object
+   *   explicitly on a state config, one is still created for you internally.
+   *   So by decorating this builder function you have access to decorating template
+   *   and controller properties.
+   * - **ownParams** `{object}` - returns an array of params that belong to the state,
+   *   not including any params defined by ancestor states.
+   * - **path** `{string}` - returns the full path from the root down to this state.
+   *   Needed for state activation.
+   * - **includes** `{object}` - returns an object that includes every state that
+   *   would pass a `$state.includes()` test.
+   *
+   * #### Example:
+   * Override the internal 'views' builder with a function that takes the state
+   * definition, and a reference to the internal function being overridden:
+   * ```js
+   * $stateProvider.decorator('views', function (state, parent) {
+   *   let result = {},
+   *       views = parent(state);
+   *
+   *   angular.forEach(views, function (config, name) {
+   *     let autoName = (state.name + '.' + name).replace('.', '/');
+   *     config.templateUrl = config.templateUrl || '/partials/' + autoName + '.html';
+   *     result[name] = config;
+   *   });
+   *   return result;
+   * });
+   *
+   * $stateProvider.state('home', {
+   *   views: {
+   *     'contact.list': { controller: 'ListController' },
+   *     'contact.item': { controller: 'ItemController' }
+   *   }
+   * });
+   * ```
+   *
+   *
+   * ```js
+   * // Auto-populates list and item views with /partials/home/contact/list.html,
+   * // and /partials/home/contact/item.html, respectively.
+   * $state.go('home');
+   * ```
+   *
+   * @param {string} name The name of the builder function to decorate.
+   * @param {object} func A function that is responsible for decorating the original
+   * builder function. The function receives two parameters:
+   *
+   *   - `{object}` - state - The state config object.
+   *   - `{object}` - super - The original builder function.
+   *
+   * @return {object} $stateProvider - $stateProvider instance
+   */
+  decorator(name, func) {
+    return this.stateRegistry.decorator(name, func) || this;
+  }
+  state(name, definition) {
+    if (isObject(name)) {
+      definition = name;
+    } else {
+      definition.name = name;
+    }
+    this.stateRegistry.register(definition);
+    return this;
+  }
+  /**
+   * Registers an invalid state handler
+   *
+   * This is a passthrough to [[StateService.onInvalid]] for ng1.
+   */
+  onInvalid(callback) {
+    return this.stateService.onInvalid(callback);
+  }
+}

package/src/router/adapter/statebuilders/onEnterExitRetain.js

@@ -0,0 +1,30 @@
+/** @publicapi @module ng1 */ /** */
+import { getLocals } from "../services";
+import { services } from "../../core/common/coreservices";
+import { extend } from "../../../core/utils";
+import { ResolveContext } from "../../core/resolve/resolveContext";
+
+/**
+ * This is a [[StateBuilder.builder]] function for angular1 `onEnter`, `onExit`,
+ * `onRetain` callback hooks on a [[Ng1StateDeclaration]].
+ *
+ * When the [[StateBuilder]] builds a [[StateObject]] object from a raw [[StateDeclaration]], this builder
+ * ensures that those hooks are injectable for @uirouter/angularjs (ng1).
+ *
+ * @internalapi
+ */
+export const getStateHookBuilder = (hookName) =>
+  function stateHookBuilder(stateObject) {
+    const hook = stateObject[hookName];
+    const pathname = hookName === "onExit" ? "from" : "to";
+    function decoratedNg1Hook(trans, state) {
+      const resolveContext = new ResolveContext(trans.treeChanges(pathname));
+      const subContext = resolveContext.subContext(state.$$state());
+      const locals = extend(getLocals(subContext), {
+        $state$: state,
+        $transition$: trans,
+      });
+      return services.$injector.invoke(hook, this, locals);
+    }
+    return hook ? decoratedNg1Hook : undefined;
+  };

package/src/router/adapter/statebuilders/views.js

@@ -0,0 +1,146 @@
+/** @publicapi @module ng1 */ /** */
+import { pick, forEach, tail, extend } from "../../core/common/common";
+import { isArray, isDefined, isString } from "../../../core/utils";
+import { isInjectable } from "../../core/common/predicates";
+import { services } from "../../core/common/coreservices";
+import { trace } from "../../core/common/trace";
+import { ViewService } from "../../core/view/view";
+import { ResolveContext } from "../../core/resolve/resolveContext";
+import { Resolvable } from "../../core/resolve/resolvable";
+
+/** @internalapi */
+export function getNg1ViewConfigFactory() {
+  let templateFactory = null;
+  return (path, view) => {
+    templateFactory =
+      templateFactory || services.$injector.get("$templateFactory");
+    return [new Ng1ViewConfig(path, view, templateFactory)];
+  };
+}
+/** @internalapi */
+const hasAnyKey = (keys, obj) =>
+  keys.reduce((acc, key) => acc || isDefined(obj[key]), false);
+/**
+ * This is a [[StateBuilder.builder]] function for angular1 `views`.
+ *
+ * When the [[StateBuilder]] builds a [[StateObject]] object from a raw [[StateDeclaration]], this builder
+ * handles the `views` property with logic specific to @uirouter/angularjs (ng1).
+ *
+ * If no `views: {}` property exists on the [[StateDeclaration]], then it creates the `views` object
+ * and applies the state-level configuration to a view named `$default`.
+ *
+ * @internalapi
+ */
+export function ng1ViewsBuilder(state) {
+  // Do not process root state
+  if (!state.parent) return {};
+  const tplKeys = [
+      "templateProvider",
+      "templateUrl",
+      "template",
+      "notify",
+      "async",
+    ],
+    ctrlKeys = [
+      "controller",
+      "controllerProvider",
+      "controllerAs",
+      "resolveAs",
+    ],
+    compKeys = ["component", "bindings", "componentProvider"],
+    nonCompKeys = tplKeys.concat(ctrlKeys),
+    allViewKeys = compKeys.concat(nonCompKeys);
+  // Do not allow a state to have both state-level props and also a `views: {}` property.
+  // A state without a `views: {}` property can declare properties for the `$default` view as properties of the state.
+  // However, the `$default` approach should not be mixed with a separate `views: ` block.
+  if (isDefined(state.views) && hasAnyKey(allViewKeys, state)) {
+    throw new Error(
+      `State '${state.name}' has a 'views' object. ` +
+        `It cannot also have "view properties" at the state level.  ` +
+        `Move the following properties into a view (in the 'views' object): ` +
+        ` ${allViewKeys.filter((key) => isDefined(state[key])).join(", ")}`,
+    );
+  }
+  const views = {},
+    viewsObject = state.views || { $default: pick(state, allViewKeys) };
+  forEach(viewsObject, function (config, name) {
+    // Account for views: { "": { template... } }
+    name = name || "$default";
+    // Account for views: { header: "headerComponent" }
+    if (isString(config)) config = { component: config };
+    // Make a shallow copy of the config object
+    config = extend({}, config);
+    // Do not allow a view to mix props for component-style view with props for template/controller-style view
+    if (hasAnyKey(compKeys, config) && hasAnyKey(nonCompKeys, config)) {
+      throw new Error(
+        `Cannot combine: ${compKeys.join("|")} with: ${nonCompKeys.join("|")} in stateview: '${name}@${state.name}'`,
+      );
+    }
+    config.resolveAs = config.resolveAs || "$resolve";
+    config.$type = "ng1";
+    config.$context = state;
+    config.$name = name;
+    const normalized = ViewService.normalizeUIViewTarget(
+      config.$context,
+      config.$name,
+    );
+    config.$uiViewName = normalized.uiViewName;
+    config.$uiViewContextAnchor = normalized.uiViewContextAnchor;
+    views[name] = config;
+  });
+  return views;
+}
+/** @hidden */
+let id = 0;
+/** @internalapi */
+export class Ng1ViewConfig {
+  constructor(path, viewDecl, factory) {
+    this.path = path;
+    this.viewDecl = viewDecl;
+    this.factory = factory;
+    this.$id = id++;
+    this.loaded = false;
+    this.getTemplate = (uiView, context) =>
+      this.component
+        ? this.factory.makeComponentTemplate(
+            uiView,
+            context,
+            this.component,
+            this.viewDecl.bindings,
+          )
+        : this.template;
+  }
+  load() {
+    const $q = services.$q;
+    const context = new ResolveContext(this.path);
+    const params = this.path.reduce(
+      (acc, node) => extend(acc, node.paramValues),
+      {},
+    );
+    const promises = {
+      template: $q.when(
+        this.factory.fromConfig(this.viewDecl, params, context),
+      ),
+      controller: $q.when(this.getController(context)),
+    };
+    return $q.all(promises).then((results) => {
+      trace.traceViewServiceEvent("Loaded", this);
+      this.controller = results.controller;
+      extend(this, results.template); // Either { template: "tpl" } or { component: "cmpName" }
+      return this;
+    });
+  }
+  /**
+   * Gets the controller for a view configuration.
+   *
+   * @returns {Function|Promise.<Function>} Returns a controller, or a promise that resolves to a controller.
+   */
+  getController(context) {
+    const provider = this.viewDecl.controllerProvider;
+    if (!isInjectable(provider)) return this.viewDecl.controller;
+    const deps = services.$injector.annotate(provider);
+    const providerFn = isArray(provider) ? tail(provider) : provider;
+    const resolvable = new Resolvable("", providerFn, deps);
+    return resolvable.get(context);
+  }
+}

package/src/router/adapter/templateFactory.js

@@ -0,0 +1,218 @@
+/** @publicapi @module view */ /** */
+import {
+  isArray,
+  isDefined,
+  isFunction,
+  isObject,
+} from "../core/common/predicates";
+import { services } from "../core/common/coreservices";
+import { tail, unnestR } from "../core/common/common";
+import { Resolvable } from "../core/resolve/resolvable";
+import { kebobString } from "../core/common/strings";
+
+/**
+ * Service which manages loading of templates from a ViewConfig.
+ */
+export class TemplateFactory {
+  constructor() {
+    /** @hidden */ this._useHttp = true; // TODO investigate
+    /** @hidden */ this.$get = [
+      "$http",
+      "$templateCache",
+      "$injector",
+      ($http, $templateCache, $injector) => {
+        this.$templateRequest =
+          $injector.has &&
+          $injector.has("$templateRequest") &&
+          $injector.get("$templateRequest");
+        this.$http = $http;
+        this.$templateCache = $templateCache;
+        return this;
+      },
+    ];
+  }
+  /** @hidden */
+  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 params  Parameters to pass to the template function.
+   * @param 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 = "<ui-view></ui-view>";
+    const asTemplate = (result) =>
+      services.$q.when(result).then((str) => ({ template: str }));
+    const asComponent = (result) =>
+      services.$q.when(result).then((str) => ({ component: str }));
+    return isDefined(config.template)
+      ? asTemplate(this.fromString(config.template, params))
+      : isDefined(config.templateUrl)
+        ? asTemplate(this.fromUrl(config.templateUrl, params))
+        : isDefined(config.templateProvider)
+          ? asTemplate(
+              this.fromProvider(config.templateProvider, params, context),
+            )
+          : isDefined(config.component)
+            ? asComponent(config.component)
+            : isDefined(config.componentProvider)
+              ? asComponent(
+                  this.fromComponentProvider(
+                    config.componentProvider,
+                    params,
+                    context,
+                  ),
+                )
+              : asTemplate(defaultTemplate);
+  }
+  /**
+   * Creates a template from a string or a function returning a string.
+   *
+   * @param template html template as a string or function that returns an html template as a string.
+   * @param 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) ? 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 = url(params);
+    if (url == null) return null;
+    if (this._useHttp) {
+      return this.$http
+        .get(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 provider Function to invoke via `locals`
+   * @param {Function} injectFn a function used to invoke the template provider
+   * @return {string|Promise.<string>} The template html as a string, or a promise
+   * for that string.
+   */
+  fromProvider(provider, params, context) {
+    const deps = services.$injector.annotate(provider);
+    const providerFn = 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 provider Function to invoke via `locals`
+   * @param {Function} injectFn a function used to invoke the template provider
+   * @return {string} The template html as a string: "<component-name input1='::$resolve.foo'></component-name>".
+   */
+  fromComponentProvider(provider, params, context) {
+    const deps = services.$injector.annotate(provider);
+    const providerFn = isArray(provider) ? tail(provider) : provider;
+    const resolvable = new Resolvable("", providerFn, deps);
+    return resolvable.get(context);
+  }
+  /**
+   * 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 uiView {object} The parent ui-view (for binding outputs to callbacks)
+   * @param context The ResolveContext (for binding outputs to callbacks returned from resolves)
+   * @param component {string} Component's name in camel case.
+   * @param bindings An object defining the component's bindings: {foo: '<'}
+   * @return {string} The template as a string: "<component-name input1='::$resolve.foo'></component-name>".
+   */
+  makeComponentTemplate(uiView, context, component, bindings) {
+    bindings = bindings || {};
+    // Bind once prefix
+    const prefix = angular.version.minor >= 3 ? "::" : "";
+    // 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 = (input) => {
+      const { name, type } = input;
+      const attrName = kebob(name);
+      // If the ui-view has an attribute which matches a binding on the routed component
+      // then pass that attribute through to the routed component template.
+      // Prefer ui-view wired mappings to resolve data, unless the resolve was explicitly bound using `bindings:`
+      if (uiView.attr(attrName) && !bindings[name])
+        return `${attrName}='${uiView.attr(attrName)}'`;
+      const resolveName = bindings[name] || name;
+      // Pre-evaluate the expression for "@" bindings by enclosing in {{ }}
+      // some-attr="{{ ::$resolve.someResolveName }}"
+      if (type === "@")
+        return `${attrName}='{{${prefix}$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 && services.$injector.annotate(fn)) || [];
+        // account for array style injection, i.e., ['foo', function(foo) {}]
+        const arrayIdxStr = isArray(fn) ? `[${fn.length - 1}]` : "";
+        return `${attrName}='$resolve.${resolveName}${arrayIdxStr}(${args.join(",")})'`;
+      }
+      // some-attr="::$resolve.someResolveName"
+      return `${attrName}='${prefix}$resolve.${resolveName}'`;
+    };
+    const attrs = getComponentBindings(component).map(attributeTpl).join(" ");
+    const kebobName = kebob(component);
+    return `<${kebobName} ${attrs}></${kebobName}>`;
+  }
+}
+// Gets all the directive(s)' inputs ('@', '=', and '<') and outputs ('&')
+function getComponentBindings(name) {
+  const cmpDefs = services.$injector.get(name + "Directive"); // 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) && isArray(tuple[1]))
+    // { name: ('foo' || 'input'), type: '=' }
+    .map((tuple) => ({ name: tuple[1][2] || tuple[0], type: tuple[1][1] }));