Implement ui-router-core 2.x plugin api

UI-Router State Visualizer and Transition Visualizer

Try the Demo plunker

What

Visualizes the state tree and transitions in UI-Router 1.0+.

This script augments your app with two components:

State Visualizer: Your UI-Router state tree, showing the active state and its active ancestors (green nodes)
- Clicking a state will transition to that state.
- If your app is large, state trees can be collapsed by double-clicking a state.
- Supports different layouts and zoom.
Transition Visualizer: A list of each transition (from one state to another)
- Color coded Transition status (success/error/ignored/redirected)
- Hover over a Transition to show which states were entered/exited, or retained during the transition.
- Click the Transition to see details (parameter values and resolve data)

How

The Visualizer is a UI-Router plugin. Register the plugin with the UIRouter object.

Locate the Plugin

Using a <script> tag

Add the script as a tag in your HTML.
```
<script src="//unpkg.com/@uirouter/visualizer@4"></script>
```
The visualizer Plugin can be found (as a global variable) on the window object.
```
var Visualizer = window['@uirouter/visualizer'].Visualizer;
```

Using require or import (SystemJS, Webpack, etc)

Add the npm package to your project

npm install @uirouter/visualizer

Use require or ES6 import:

var Visualizer = require('@uirouter/visualizer').Visualizer;

import { Visualizer } from '@uirouter/visualizer';

Register the plugin

First get a reference to the UIRouter object instance. This differs by framework (AngularJS, Angular, React, etc. See below for details).

After getting a reference to the UIRouter object, register the Visualizer plugin

var pluginInstance = uiRouterInstance.plugin(Visualizer);

Configuring the plugin

You can pass a configuration object when registering the plugin. The configuration object may have the following fields:

state: (boolean) State Visualizer is not rendered when this is false
transition: (boolean) Transition Visualizer is not rendered when this is false
stateVisualizer.node.label: (function) A function that returns the label for a node
stateVisualizer.node.classes: (function) A function that returns classnames to apply to a node

`stateVisualizer.node.label`

The labels for tree nodes can be customized.

Provide a function that accepts the node object and the default label and returns a string:

function(node, defaultLabel) { return "label"; }

This example adds (future) to future states. Note: node.self contains a reference to the state declaration object.

var options = {
  stateVisualizer: {
    node: {
      label: function (node, defaultLabel) {
        return node.self.name.endsWith('.**') ? defaultLabel + ' (future)' : defaultLabel;
      },
    },
  },
};

var pluginInstance = uiRouterInstance.plugin(Visualizer, options);

`stateVisualizer.node.classes`

The state tree visualizer can be configured to add additional classes to nodes. Example below marks every node with angular.js view with is-ng1 class.

var options = {
  stateVisualizer: {
    node: {
      classes(node) {
        return Object.entries(node.views || {}).some((routeView) => routeView[1] && routeView[1].$type === 'ng1')
          ? 'is-ng1'
          : '';
      },
    },
  },
};

var pluginInstance = uiRouterInstance.plugin(Visualizer, options);

Getting a reference to the `UIRouter` object

Angular 1

Inject the $uiRouter router instance in a run block.

// inject the router instance into a `run` block by name
app.run(function ($uiRouter) {
  var pluginInstance = $uiRouter.plugin(Visualizer);
});

Angular 2

Use a config function in your root module's UIRouterModule.forRoot(). The router instance is passed to the config function.

import { Visualizer } from "@uirouter/visualizer";

...

export function configRouter(router: UIRouter) {
  var pluginInstance = router.plugin(Visualizer);
}

...

@NgModule({
  imports: [ UIRouterModule.forRoot({ config: configRouter }) ]
  ...

React (Imperative)

Create the UI-Router instance manually by calling new UIRouterReact();

var Visualizer = require('@uirouter/visualizer').Visualizer;
var router = new UIRouterReact();
var pluginInstance = router.plugin(Visualizer);

React (Declarative)

Add the plugin to your UIRouter component

var Visualizer = require('@uirouter/visualizer').Visualizer;

...
render() {
  return <UIRouter plugins=[Visualizer]></UIRouter>
}

ui-router / visualizer Goto Github PK

visualizer's Introduction

UI-Router State Visualizer and Transition Visualizer

What

How

Locate the Plugin

Register the plugin

Configuring the plugin

stateVisualizer.node.label

stateVisualizer.node.classes

Getting a reference to the UIRouter object

Angular 1

Angular 2

React (Imperative)

React (Declarative)

visualizer's People

Contributors

Stargazers

Watchers

Forkers

visualizer's Issues

Recommend Projects

Recommend Topics

Recommend Org

`stateVisualizer.node.label`

`stateVisualizer.node.classes`

Getting a reference to the `UIRouter` object