fix(typescript): Create an artisinal hand crafted typings file for be…

…tter compat with react

Fixes #99

artisinal.typings.d.ts

@@ -0,0 +1,240 @@
+import { StateObject, UIRouter, UIRouterPlugin } from '@uirouter/core';
+declare const visualizer: (router: UIRouter) => Visualizer;
+
+export interface Options {
+  state?: boolean;
+  transition?: boolean;
+}
+
+// The plugin
+declare class Visualizer implements UIRouterPlugin {
+  router: UIRouter;
+  name: string;
+  private stateVisualizerEl;
+  private transitionVisualizerEl;
+  dispose(router?: UIRouter): any;
+  constructor(router: UIRouter, options: Options);
+}
+
+// The StateSelector component
+export interface IStateSelectorProps {
+  router: any;
+}
+declare const StateSelector: (props: IStateSelectorProps) => any;
+
+// The StateVisualizer component
+interface StateVisualizerStatics {
+  /**
+   * Creates a new StateVisualizer and adds it to the document.
+   *
+   * @param router the UIRouter object
+   * @param element (optional) the element where the StateVisualizer should be placed.
+   *                If no element is passed, an element will be created in the body.
+   * @param props height/width properties default: { height: 350, width: 250 }
+   *
+   * # Angular 1 + UI-Router (1.0.0-beta.2 and higher):
+   *
+   * Inject the router (`$uiRouter`) in a run block, then call StateVisualizer.create();
+   *
+   * ```
+   * app.run(function($uiRouter) {
+   *   StateVisualizer.create($uiRouter);
+   * });
+   * ```
+   *
+   * # Angular 1 + UI-Router 1.0.0-alpha.1 through 1.0.0-beta.1:
+   *
+   * Inject the router (`ng1UIRouter`) in a run block, then call StateVisualizer.create();
+   *
+   * ```
+   * app.run(function(ng1UIRouter) {
+   *   StateVisualizer.create(ng1UIRouter);
+   * });
+   * ```
+   *
+   * Angular 2:
+   *
+   * Call StateVisualizer.create() from your UIRouterConfig
+   *
+   * ```
+   * export class MyUIRouterConfig extends UIRouterConfig {
+   *   configure(router: UIRouter) {
+   *     StateVisualizer.create(router);
+   *   }
+   * }
+   * ```
+   *
+   * React:
+   *
+   * Call StateVisualizer.create() from your bootstrap
+   *
+   * ```
+   * let router = new UIRouterReact();
+   * StateVisualizer.create(router);
+   * router.start();
+   * ```
+   *
+   * @return the element that was bootstrapped.
+   *         You can destroy the component using:
+   *         [ReactDOM.unmountComponentAtNode](https://facebook.github.io/react/docs/top-level-api.html#reactdom.unmountcomponentatnode)
+   */
+  create(router: any, element?: any, props?: {}): any;
+}
+
+export interface IStateVisualizerProps {
+  router: any;
+  minimizeAfter?: number;
+  width?: number;
+  height?: number;
+}
+declare const StateVisualizer: ((props: IStateVisualizerProps) => any) & StateVisualizerStatics;
+
+// The StateTree component
+export interface IStateTreeProps extends NodeDimensions, VisDimensions {
+  router?: any;
+  renderer?: Renderer;
+}
+// The StateVisualizer component
+declare const StateTree: (props: IStateTreeProps) => any;
+
+// The TransitionVisualizer component
+
+export interface ITransitionVisualizerProps {
+  router: any;
+  maximumTransitions?: number;
+}
+/**
+ * This outer component manages the list of all transitions (history), and provides a fixed, scrolling viewport.
+ * It attaches hooks for lifecycle events and decorates the transition with a descriptive message.
+ */
+declare const TransitionVisualizer: ((props: ITransitionVisualizerProps) => any) & TransitionVisualizerStatics;
+interface TransitionVisualizerStatics {
+  /**
+   * Creates a new TransitionVisualizer and adds it to the document.
+   *
+   * @param router the UIRouter object
+   * @param element (optional) the element where the TransitionVisualizer should be placed.
+   *                If no element is passed, an element will be created in the body.
+   * @param props maximum transitions default: { maximumTransitions: 15 }
+   *
+   *
+   * # Angular 1 + UI-Router (1.0.0-beta.2 and higher):
+   *
+   * Inject the router (`$uiRouter`) in a run block, then call TransitionVisualizer.create();
+   *
+   * ```
+   * app.run(function($uiRouter) {
+   *   TransitionVisualizer.create($uiRouter);
+   * });
+   * ```
+   *
+   * # Angular 1 + UI-Router 1.0.0-alpha.1 through 1.0.0-beta.1:
+   *
+   * Inject the router (`ng1UIRouter`) in a run block, then call TransitionVisualizer.create();
+   *
+   * ```
+   * app.run(function(ng1UIRouter) {
+   *   TransitionVisualizer.create(ng1UIRouter);
+   * });
+   * ```
+   *
+   * Angular 2:
+   *
+   * Call TransitionVisualizer.create() from your UIRouterConfig
+   *
+   * ```
+   * export class MyUIRouterConfig extends UIRouterConfig {
+   *   configure(router: UIRouter) {
+   *     TransitionVisualizer.create(router);
+   *   }
+   * }
+   * ```
+   *
+   * React:
+   *
+   * Call TransitionVisualizer.create() from your bootstrap
+   *
+   * ```
+   * let router = new UIRouterReact();
+   * TransitionVisualizer.create(router);
+   * router.start();
+   * ```
+   *
+   * @return the element that was bootstrapped.
+   *         You can destroy the component using:
+   *         [ReactDOM.unmountComponentAtNode](https://facebook.github.io/react/docs/top-level-api.html#reactdom.unmountcomponentatnode)
+   */
+  create(router: any, element?: any, props?: {}): any;
+}
+
+// Other non-preact interface defs
+export interface NodeDimensions {
+  radius?: number;
+  offsetX?: number;
+  offsetY?: number;
+  scaleX?: number;
+  scaleY?: number;
+}
+
+export interface VisDimensions {
+  height: number;
+  width: number;
+}
+
+export interface Renderer {
+  // Determines the render order of nodes (to allow a sort of "z-ordering")
+  sortNodesFn(a: StateVisNode, b: StateVisNode): number;
+  // Applies a layout to the nodes
+  layoutFn(rootNode: StateVisNode): void;
+  // Renders a state label
+  labelRenderFn(x: number, y: number, node: StateVisNode, renderer: Renderer): any;
+  // Renders an edge
+  edgeRenderFn(rootNode: StateVisNode, renderer: Renderer): any;
+
+  baseRadius: number; // size of circles radius, in pixels
+  baseFontSize: number; // size of text, in pixels
+  baseStrokeWidth: number; // stroke width of lines
+  baseNodeStrokeWidth: number; // stroke width of circles
+  zoom: number; // 0.0-1.0
+}
+
+export interface StateVisNode {
+  name: string;
+
+  label: string;
+  highlight: boolean;
+  active: boolean;
+  retained: boolean;
+  exited: boolean;
+  entered: boolean;
+  inactive: boolean;
+  _collapsed: boolean;
+  readonly collapsed: boolean;
+  readonly visible: boolean;
+  parent: StateObject;
+  _parent: StateVisNode;
+  _children: StateVisNode[];
+  readonly children: StateVisNode[];
+  future: boolean;
+  lazyLoad: any;
+  readonly totalDescendents: number;
+
+  _classes: string;
+
+  /** Original x coordinate from d3 layout: tree() or cluster() */
+  layoutX: number;
+  /** Original y coordinate from d3 layout: tree() or cluster() */
+  layoutY: number;
+
+  /** Projected x coordinate (i.e., for radial projection) */
+  x: number;
+  /** Projected y coordinate (i.e., for radial projection) */
+  y: number;
+
+  /** Current animation frame's x coordinate */
+  animX: number;
+  /** Current animation frame's y coordinate */
+  animY: number;
+}
+
+export { Visualizer, visualizer, StateSelector, StateVisualizer, StateTree, TransitionVisualizer };

package.json

@@ -63,7 +63,7 @@
   },
   "main": "_bundles/ui-router-visualizer.js",
   "jsnext:main": "lib-esm/visualizer.js",
-  "typings": "lib-esm/visualizer.d.ts",
+  "typings": "artisinal.typings.d.ts",
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"

src/statevis/interface.ts

@@ -13,27 +13,15 @@ export interface VisDimensions {
   width: number;
 }
 
-export interface LayoutFn {
-  (rootNode: StateVisNode): void;
-}
-
-export interface NodeSortFn {
-  (a: StateVisNode, b: StateVisNode): number;
-}
-
-export interface EdgeRenderFn {
-  (rootNode: StateVisNode, renderer: Renderer): any;
-}
-
-export interface LabelRenderFn {
-  (x: number, y: number, node: StateVisNode, renderer: Renderer): any;
-}
-
 export interface Renderer {
-  sortNodesFn: NodeSortFn; // Determines the render order of nodes (to allow a sort of "z-ordering")
-  layoutFn: LayoutFn; // Applies a layout to the nodes
-  labelRenderFn: LabelRenderFn; // Renders a state label
-  edgeRenderFn: EdgeRenderFn; // Renders an edge
+  // Determines the render order of nodes (to allow a sort of "z-ordering")
+  sortNodesFn(a: StateVisNode, b: StateVisNode): number;
+  // Applies a layout to the nodes
+  layoutFn(rootNode: StateVisNode): void;
+  // Renders a state label
+  labelRenderFn(x: number, y: number, node: StateVisNode, renderer: Renderer): any;
+  // Renders an edge
+  edgeRenderFn(rootNode: StateVisNode, renderer: Renderer): any;
 
   baseRadius: number; // size of circles radius, in pixels
   baseFontSize: number; // size of text, in pixels