JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 297
  • Score
    100M100P100Q78213F
  • License MIT

Visualize context hierarchy, bindings, configurations, and dependencies

Package Exports

  • @loopback/context-explorer
  • @loopback/context-explorer/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@loopback/context-explorer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@loopback/context-explorer

This module contains a component adding a Context Explorer to LoopBack applications.

Stability: ⚠️Experimental⚠️

Experimental packages provide early access to advanced or experimental functionality to get community feedback. Such modules are published to npm using 0.x.y versions. Their APIs and functionality may be subject to breaking changes in future releases.

Installation

npm install --save @loopback/context-explorer

Basic use

The component should be loaded in the constructor of your custom Application class.

Start by importing the component class:

import {ContextExplorerComponent} from '@loopback/context-explorer';

In the constructor, add the component to your application:

this.component(ContextExplorerComponent);

By default, API Explorer is mounted at /context-explorer. This path can be customized via ContextExplorer configuration as follows:

this.configure(ContextExplorerBindings.COMPONENT).to({
  path: '/context-ui',
});

Endpoints

The following endpoints are added by the component.

  1. /context-explorer/inspect: Fetch a JSON document for the context hierarchy.

    The following query parameters are supported:

    • includeParent: include parent contexts (default: true)
    • includeInjections: include injections (default: true)
    • includeGraph: include a graph in graphviz dot format (default: true)

  2. /context-explorer/graph: Render the LoopBack application as a SVG diagram.

    The following query parameters are supported:

    • includeParent: include parent contexts (default: true)
    • includeInjections: include injections (default: true)
    • format: dot or svg (default: svg)

  3. /context-explorer: Display the graph using d3-graphviz.

Sample graph

graph.svg

Contributions

Tests

Run npm test from the root folder.

Contributors

See all contributors.

License

MIT