Plugin architecture

[christopherthielen]

With visualizer, sticky states, dsr, etc. it might be nice to have an official plugin architecture.

Something like:

import {MyCoolPlugin} from "ui-router-cool-plugin";

var router = new UIRouterReact();
router.plugin(MyCoolPlugin);

[elboman]

Yeah, I was thinking about it while working on the redux implementation. It would be great to have the method inside the core and then extend form that if needed.

We should define what the plugin should export, in order to create consistency between plugins and to provide .plugin() implementation that works independently.

naive example:

export function myAwesomePlugin (routerInstance) {
  // do something with the router instance
}

so .plugin() could be:

// inside the UIRouter class
plugin = (pluginToApply) => {
  pluginToApply(this);
}

[christopherthielen]

@elboman
This is what I'm thinking:

  /**
   * Adds a plugin to UI-Router
   *
   * This method adds a UI-Router Plugin.
   * A plugin can enhance or change UI-Router behavior using any public API.
   *
   * #### Example:
   * ```js
   * import { MyCoolPlugin } from "ui-router-cool-plugin";
   *
   * var plugin = router.addPlugin(MyCoolPlugin);
   * ```
   *
   * ### Plugin authoring
   *
   * A plugin is simply a class (or constructor function) which accepts a [[UIRouter]] instance and (optionally) an options object.
   *
   * The plugin can implement its functionality using any of the public APIs of [[UIRouter]].
   * For example, it may configure router options or add a Transition Hook.
   *
   * The plugin can then be published as a separate module.
   *
   * #### Example:
   * ```js
   * export class MyAuthPlugin {
   *   constructor(router: UIRouter, options: any) {
   *     let $transitions = router.transitionService;
   *     let $state = router.stateService;
   *
   *     let authCriteria = {
   *       to: (state) => state.data && state.data.requiresAuth
   *     };
   *
   *     function authHook(transition: Transition) {
   *       let authService = transition.injector().get('AuthService');
   *       if (!authService.isAuthenticated()) {
   *         return $state.target('login');
   *       }
   *     }
   *
   *     $transitions.onStart(authCriteria, authHook);
   *   }
   * }
   * ```
   *
   * @param PluginClass a UI-Router Plugin class (or constructor function).
   * @param options options to pass to the plugin
   * @returns {T}
   */
  addPlugin<T extends UIRouterPlugin>(PluginClass: { new(router: UIRouter, options?: any): T }, options: any = {}): T {
    let pluginInstance = new PluginClass(this, options);
    var pluginName = pluginInstance.name();
    return this._plugins[pluginName] = pluginInstance;
  }