Neutralize Pesky Miscreants
    Wondering what’s next for npm?Check out our public roadmap! »

    ngrx-vis

    0.1.24 • Public • Published

    NgRx Vis

    ⚙️ This package is in a very early stage. 🐛You are welcome to test it and report an issue if you find any bug.

    NgRx Vis visualizes the journey of each action in your project.

    It displays in which file an action is created, where it is dispatched and how it is processed (by an effect or a reducer).

    You get a documentation being always up to date. You will be able to identify effects that are too complex.

    In future we plan to provide guidance to apply best practices that are recommended by the NgRx core-team.

    How to use

    # install ngrx-vis 
    npm install -D ngrx-vis

    Create a script in your package.json executing NgRx Vis.

    {
      "scripts": {
        "ngrx-vis": "ngrx-vis -p ./tsconfig.app.json"
      }
    }
    # generate report and store it in ngrx-vis/ 
    npm run ngrx-vis

    Options

    Options:
      -V, --version                 output the version number
      -g, --glob <**/*.actions.ts>  Glob for files containing actions (default: "**/*.actions.ts")
      -p, --project <path>          Specify path to tsconfig
      -h, --help                    display help for command
     
    Example call:
      $ ngrx-vis --project ./src/tsconfig.app.json

    FAQ

    Which versions of NgRx are supported?

    You need at least NgRx 8 installed. NgRx Vis traces actions which are created with the createAction helper.

    How is the graph built?

    NgRx Vis does static code analysis. It looks for action declarations, resolves all references and identifies the usages of the respective action.

    Limitations

    Actions created at runtime

    NgRx Vis is not capable of resolving actions that are created at runtime. Currently @ngrx/data-Actions wont show up either. In some of those cases where actions are generated based on a convention, it would be possible to write a Resolver that generates the needed meta data for the graph.

    3rd Party Libraries

    If a plugin for NgRx does not use vanilla NgRx actions, NgRx Vis cannot show them out-of-the-box. However, it is possible to write a Resolver that parses the AST for other Action types.

    Credits

    Icons made by Freepik from www.flaticon.com
    Icons made by Those Icons from www.flaticon.com
    Icons made by Google from www.flaticon.com
    Icons made by Pixel perfect from www.flaticon.com

    Contributors ✨

    Thanks goes to these wonderful people (emoji key):


    Gregor Woiwode

    💻 📖

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i ngrx-vis

    DownloadsWeekly Downloads

    20

    Version

    0.1.24

    License

    GPL-3.0-or-later

    Unpacked Size

    47.7 kB

    Total Files

    49

    Last publish

    Collaborators

    • avatar