{"id":24838037,"url":"https://github.com/ammarnajjar/ngrx-graph","last_synced_at":"2025-09-04T15:34:50.593Z","repository":{"id":62962681,"uuid":"560920325","full_name":"ammarnajjar/ngrx-graph","owner":"ammarnajjar","description":"Generate NgRx actions dot graph files","archived":false,"fork":false,"pushed_at":"2025-01-25T12:05:57.000Z","size":1594,"stargazers_count":4,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-08T21:32:07.050Z","etag":null,"topics":["actions","angular","dot","graph","ngrx","state-management"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngrx-graph","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ammarnajjar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-02T14:55:43.000Z","updated_at":"2025-07-24T14:36:54.000Z","dependencies_parsed_at":"2022-11-09T23:45:32.330Z","dependency_job_id":"cd00e15a-59b0-41b1-accb-bedc04d6a152","html_url":"https://github.com/ammarnajjar/ngrx-graph","commit_stats":{"total_commits":276,"total_committers":3,"mean_commits":92.0,"dds":"0.12681159420289856","last_synced_commit":"ca0f8622b6dffe915c007ea6137aa1033253890d"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/ammarnajjar/ngrx-graph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ammarnajjar%2Fngrx-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ammarnajjar%2Fngrx-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ammarnajjar%2Fngrx-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ammarnajjar%2Fngrx-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ammarnajjar","download_url":"https://codeload.github.com/ammarnajjar/ngrx-graph/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ammarnajjar%2Fngrx-graph/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273631556,"owners_count":25140627,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["actions","angular","dot","graph","ngrx","state-management"],"created_at":"2025-01-31T06:09:20.174Z","updated_at":"2025-09-04T15:34:50.569Z","avatar_url":"https://github.com/ammarnajjar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngrx-graph\n\n## Motivation:\n\nWorking with a very big [NgRx](https://ngrx.io/) store in an angular application will lead to having lots of actions/effects and lots of interactions between components/actions/reducers. It gets very tedious very quickly to follow an action from the start to the end, and it is very easy to miss an action dispatched in an effect somewhere along the chain of actions.\n\nThis package tries to collect all actions/components/reducers participating in a particular flow and generate dot files for that flow, with the idea that following a graph visually is easier than following effects and actions in code.\n\nIt is also possible to see the whole net with all actions/components/reducers, but that is more important is to follow a particular action from the start to the end (the optional argument)\n\n## How it works\n\nThis package generates dot files representing the interaction between ngrx actions, components, effects and reducers.\n\nDot files can be then used to generate graphs using [Graphviz](https://www.graphviz.org/), so this needs to be installed first, e.g:\n\n```bash\nfor file in *.dot; do; dot -Tsvg $file -o \"${file%.*}\".svg; rm $file; done\n```\n\nThe first run will generate a json file (see `--structureFile` flag), which is used for the next runs if the flag `--force` was not set as cache.\nIf this file exists, source code will not be parsed for actions, the recorded structure will be taken from that json file. This speeds up the process considerably.\n\n\u003cdetails\u003e\n  \u003csummary\u003eGraph Keys\u003c/summary\u003e\n\n|                 |                                              |\n| --------------- | -------------------------------------------- |\n| Component       | ![component](./docs/keys/component.png)      |\n| Action          | ![component](./docs/keys/action.png)         |\n| Action in focus | ![component](./docs/keys/selectedAction.png) |\n| Nested Action   | ![component](./docs/keys/nestedAction.png)   |\n| Reducer         | ![component](./docs/keys/reducer.png)        |\n\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eExamples\u003c/summary\u003e\n\n### Case 1:\n\n### Input:\n\n```typescript\n// actions\nexport const action1 = createAction('Action1');\nexport const action2 = createAction('Action2');\nexport const action3 = createAction('Action3');\n\n// component\n@Component()\nexport class FirstComponent {\n  onEvent() {\n    this.store.dispatch(action1());\n  }\n}\n\n// effects\n@Injectable()\nexport class ExampleEffects {\n  effect1$ = createEffect(() =\u003e\n    this.actions$.pipe(\n      ofType(action1),\n      switchMap(() =\u003e [action2(), action3()]),\n    ),\n  );\n}\n\n// reducer\nconst firstReducer = createReducer(\n  on(action3, () =\u003e {\n    // ...\n  }),\n);\n```\n\n### Output:\n\n```bash\nnpx ngrx-graph -j -f\n```\n\n- [ngrx-graph.json](./docs/examples/case1/ngrx-graph.json)\n\n```bash\nnpx ngrx-graph action1\n```\n\n- [dotFile](./docs/examples/case1/action1.dot)\n- graph:  \n  ![graph](./docs/examples/case1/action1.svg)\n\n```bash\nnpx ngrx-graph action3\n```\n\n- [dotFile](./docs/examples/case1/action3.dot)\n- graph:  \n  ![graph](./docs/examples/case1/action3.svg)\n\n### Case 2 (nested actions):\n\n### Input:\n\n```typescript\n// actions\nexport const nestedAction = createAction(\n  'NestedAction',\n  props\u003c{ action: Action }\u003e(),\n);\nexport const action1 = createAction('Action1');\nexport const action2 = createAction('Action2');\nexport const action3 = createAction('Action3');\n\n// component\n@Component()\nexport class FirstComponent {\n  onEvent() {\n    this.store.dispatch(nestedAction({ action: action1() }));\n  }\n}\n\n// effects\n@Injectable()\nexport class ExampleEffects {\n  effect1$ = createEffect(() =\u003e\n    this.actions$.pipe(\n      ofType(action1),\n      switchMap(() =\u003e [nestedAction1({ action: action2() }), action3()])),\n    ),\n  );\n\n  effect2$ = createEffect(() =\u003e\n    this.actions$.pipe(\n      ofType(nestedAction1),\n      map(({ action }) =\u003e nestedAction2( { action: action()})),\n    ),\n  );\n\n  effect3$ = createEffect(() =\u003e\n    this.actions$.pipe(\n      ofType(nestedAction2),\n      map(({ action }) =\u003e action())),\n    ),\n  );\n}\n\n// reducer\nconst firstReducer = createReducer(\n  on(action3, () =\u003e {\n    // ...\n  }),\n)\n```\n\n### Output:\n\n```bash\nnpx ngrx-graph -j -f\n```\n\n- [ngrx-graph.json](./docs/examples/case2/ngrx-graph.json)\n\n```bash\nnpx ngrx-graph action1\n```\n\n- [dotFile](./docs/examples/case2/action1.dot)\n- graph:  \n  ![graph](./docs/examples/case2/action1.svg)\n\n```bash\nnpx ngrx-graph action3\n```\n\n- [dotFile](./docs/examples/case2/action3.dot)\n- graph:  \n  ![graph](./docs/examples/case2/action3.svg)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eUsage\u003c/summary\u003e\n\n\u003c!-- usage --\u003e\n```sh-session\n$ npm install -g ngrx-graph\n$ ngrx-graph COMMAND\nrunning command...\n$ ngrx-graph (--version)\nngrx-graph/0.0.13 darwin-arm64 node-v22.10.0\n$ ngrx-graph --help [COMMAND]\nUSAGE\n  $ ngrx-graph COMMAND\n...\n```\n\u003c!-- usagestop --\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eCommands\u003c/summary\u003e\n\n\u003c!-- commands --\u003e\n* [`ngrx-graph graph [ACTION]`](#ngrx-graph-graph-action)\n* [`ngrx-graph help [COMMAND]`](#ngrx-graph-help-command)\n\n## `ngrx-graph graph [ACTION]`\n\nGenerate NgRx actions graph\n\n```\nUSAGE\n  $ ngrx-graph graph [ACTION] [-a] [-f] [-j] [-o \u003cvalue\u003e] [-d \u003cvalue\u003e] [-s \u003cvalue\u003e]\n\nARGUMENTS\n  ACTION  Action of interest. It will be ignored if --jsonOnly is used\n\nFLAGS\n  -a, --all                    Generate the whole graph for all actions and connected component, effects and reducers.\n                               It will be ignored if --jsonOnly is used\n  -d, --srcDir=\u003cvalue\u003e         [default: current directory] Source directory to grab actions from, usually the directory\n                               with package.json in it\n  -f, --force                  Force regenrating the graph structure\n  -j, --jsonOnly               Generate only the structure json file, can be combined with --structureFile option. It\n                               overrides --all and [ACTION]\n  -o, --outputDir=\u003cvalue\u003e      [default: /tmp] Destination directory, where to save the generated files\n  -s, --structureFile=\u003cvalue\u003e  [default: ngrx-graph.json] Then name of the structure json file, Path is taken from\n                               --outputDir option\n\nDESCRIPTION\n  Generate NgRx actions graph\n\nEXAMPLES\n  $ ngrx-graph graph\n```\n\n_See code: [src/commands/graph/index.ts](https://github.com/ammarnajjar/ngrx-graph/blob/v0.0.13/src/commands/graph/index.ts)_\n\n## `ngrx-graph help [COMMAND]`\n\nDisplay help for ngrx-graph.\n\n```\nUSAGE\n  $ ngrx-graph help [COMMAND...] [-n]\n\nARGUMENTS\n  COMMAND...  Command to show help for.\n\nFLAGS\n  -n, --nested-commands  Include all nested commands in the output.\n\nDESCRIPTION\n  Display help for ngrx-graph.\n```\n\n_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v6.2.15/src/commands/help.ts)_\n\u003c!-- commandsstop --\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eVersion Release Guide\u003c/summary\u003e\n\n  - change version in [`package.json`](package.json)\n  - run `npm run version`\n  - commit and push/merge to main\n  - draft and release a release on [github](https://github.com/ammarnajjar/ngrx-graph/releases/new)\n\u003c/details\u003e\n\n# Status:\n\nThis project is still young and it encourages collaborations. If you have an ideas/questions/fixes please do not hesitate to open an issue or provide a pull request.\n\nI work on this on my own free time only.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fammarnajjar%2Fngrx-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fammarnajjar%2Fngrx-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fammarnajjar%2Fngrx-graph/lists"}