# danger-plugin-typescript-graph > Visualize the dependencies between files in the TypeScript code base. Latest version **1.18.0** (published 2023-09-11) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install danger-plugin-typescript-graph pnpm add danger-plugin-typescript-graph yarn add danger-plugin-typescript-graph bun add danger-plugin-typescript-graph ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.18.0 | | Published | 2023-09-11 | | First published | 2023-04-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Node | >=16.0.0 | | Dependencies | 4 | | Unpacked size | 110 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 4 | | Author | ysk8hori | | Maintainers | ysk8hori | | Keywords | danger, danger-plugin, typescript-graph | ## Links - npm: https://www.npmjs.com/package/danger-plugin-typescript-graph - Repository: https://github.com/ysk8hori/danger-plugin-typescript-graph - Homepage: https://github.com/ysk8hori/danger-plugin-typescript-graph#readme - Issues: https://github.com/ysk8hori/danger-plugin-typescript-graph/issues - npm.io page: https://npm.io/package/danger-plugin-typescript-graph ## Dependencies (4) - [zod](https://npm.io/package/zod.md) 3.22.2 - [esdoc](https://npm.io/package/esdoc.md) ^1.1.0 - [remeda](https://npm.io/package/remeda.md) ^1.12.0 - [@ysk8hori/typescript-graph](https://npm.io/package/@ysk8hori/typescript-graph.md) 0.12.1 ## Alternatives - [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads - [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads - [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads - [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads - [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads ## Recent versions - 1.18.0 (latest) — 2023-09-11 - 1.16.0 — 2023-08-15 - 1.15.1 — 2023-08-08 - 1.15.0 — 2023-07-25 - 1.14.0 — 2023-07-24 - 1.13.0 — 2023-07-18 - 1.12.4 — 2023-06-15 - 1.12.3 — 2023-06-14 - 1.12.2 — 2023-04-26 - 1.12.1 — 2023-04-25 - 1.12.0 — 2023-04-25 - 1.11.2 — 2023-04-24 - 1.11.1 — 2023-04-24 - 1.11.0 — 2023-04-23 - 1.10.0 — 2023-04-21 - … 13 more at https://npm.io/package/danger-plugin-typescript-graph/versions ## README # danger-plugin-typescript-graph

日本語 (Japanese)

[![npm version](https://badge.fury.io/js/danger-plugin-typescript-graph.svg)](https://badge.fury.io/js/danger-plugin-typescript-graph) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) This plugin is a Danger plugin designed to automatically run the CLI tool typescript-graph, which visualizes the dependencies between files in a TypeScript codebase, in a CI environment. Understanding dependencies is crucial for maintaining code integrity. By using this plugin, you can easily check dependencies before creating or merging a pull request. ## Usage ### Preparing to Run DangerJS on CI Environment Before installing this library, make sure you have DangerJS set up to run on your CI environment. The setup involves the following 5 steps: 1. Include the Danger module. 2. Create a `Dangerfile` and add some basic rules. 3. Create an account for Danger to use. 4. Set up an access token for that account. 5. Configure your CI environment to run Danger. For more details, please refer to the [DangerJS Official Getting Started Guide](https://danger.systems/js/guides/getting_started). ### Install ```sh yarn add danger-plugin-typescript-graph --dev ``` ### At a glance ```js // dangerfile.js import typescriptGraph from 'danger-plugin-typescript-graph'; typescriptGraph(); ``` ### Sample Usage #### Basic File Modifications In this example, we show the dependency graph when you've modified `outputGraph.ts` and its related test files. The modified files are highlighted in yellow, and the files they depend on are also explicitly displayed on the graph. ```mermaid flowchart classDef modified fill:yellow,stroke:#999,color:black subgraph src["src"] src/utils["/utils"]:::dir src/index.ts["index.ts"] subgraph src/outputGraph["/outputGraph"] src/outputGraph/outputGraph.ts["outputGraph.ts"]:::modified src/outputGraph/output2Graphs.test.ts["output2Graphs.test.ts"]:::modified src/outputGraph/mergeGraphsWithDifferences.ts["mergeGraphsWithDifferences.ts"] src/outputGraph/applyMutualDifferences.ts["applyMutualDifferences.ts"] end end src/outputGraph/outputGraph.ts-->src/utils src/outputGraph/outputGraph.ts-->src/outputGraph/mergeGraphsWithDifferences.ts src/outputGraph/outputGraph.ts-->src/outputGraph/applyMutualDifferences.ts src/index.ts-->src/outputGraph/outputGraph.ts src/outputGraph/output2Graphs.test.ts-->src/outputGraph/outputGraph.ts src/outputGraph/mergeGraphsWithDifferences.ts-->src/utils src/outputGraph/applyMutualDifferences.ts-->src/utils src/index.ts-->src/utils ``` #### Changes Involving File Deletion or Movement This case demonstrates the impact when a file is deleted or moved. Dependency graphs are generated for both the base branch and the head branch. Deleted files are displayed in a grayed-out manner. ##### Base Branch ```mermaid flowchart classDef modified fill:yellow,stroke:#999,color:black classDef deleted fill:dimgray,stroke:#999,color:black,stroke-dasharray: 4 4,stroke-width:2px; subgraph src["src"] src/index.ts["index.ts"]:::modified src/index.test.ts["index.test.ts"] src/getRenameFiles.ts["getRenameFiles.ts"] src/getFullGraph.ts["getFullGraph.ts"] subgraph src/graph_["/graph"] src/_graph__/index.ts["index.ts"]:::deleted src/_graph__/outputGraph.ts["outputGraph.ts"] src/_graph__/output2Graphs.ts["output2Graphs.ts"] end end src/_graph__/index.ts-->src/_graph__/outputGraph.ts src/_graph__/index.ts-->src/_graph__/output2Graphs.ts src/index.ts-->src/getRenameFiles.ts src/index.ts-->src/getFullGraph.ts src/index.ts-->src/_graph__/index.ts src/index.test.ts-->src/index.ts ``` ##### Head Branch ```mermaid flowchart classDef modified fill:yellow,stroke:#999,color:black subgraph src["src"] src/index.ts["index.ts"]:::modified src/index.test.ts["index.test.ts"] src/getRenameFiles.ts["getRenameFiles.ts"] src/getFullGraph.ts["getFullGraph.ts"] subgraph src/graph_["/graph"] src/_graph__/output2Graphs.ts["output2Graphs.ts"] src/_graph__/outputGraph.ts["outputGraph.ts"] end end src/index.ts-->src/getRenameFiles.ts src/index.ts-->src/getFullGraph.ts src/index.ts-->src/_graph__/output2Graphs.ts src/index.ts-->src/_graph__/outputGraph.ts src/index.test.ts-->src/index.ts ``` ## Configuration The `.danger-tsgrc.json` is a configuration file that stores settings in JSON format. If the relevant configuration file does not exist, or if it is in an invalid format, the default settings will be applied. Each configuration item has a corresponding environment variable, which takes precedence over the settings in the configuration file. | Configuration Item | Details | Type | Default Value | Description | | --------------------------------- | --------------------------------------------------------------------------------- | ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------- | | Root directory for tsconfig | Env: `TSG_TSCONFIG_ROOT`
Key: `tsconfigRoot` | `string` | `"./"` | Specifies the directory where tsconfig will be searched. | | Maximum Node Count | Env: `TSG_MAX_SIZE`
Key: `maxSize` | `number` | `30` | Specifies the value to limit graph display when the number of changed files is large. | | Graph Orientation | Env: `TSG_ORIENTATION`
Key: `orientation` | `TB` or `LR` | Not specified | Specifies the orientation (`TB` or `LR`) of the graph. However, Mermaid may produce graphs in the opposite direction. | | Debug Mode | Env: `TSG_DEBUG`
Key: `debug` | `boolean` | `false` | Specifies whether to enable debug mode. Logs will be output in debug mode. | | Enclose in `
` tag | Env: `TSG_IN_DETAILS`
Key: `inDetails` | `boolean` | `true` | Specifies whether to enclose Mermaid in a `
` tag and collapse it. | | Exclude Files | Env: None
Key: `exclude` | `string[]` | `[]` | Specifies the files to be excluded from the graph. | | Display index.ts Dependency Files | Env: `TSG_INCLUDE_INDEX_FILE_DEPENDENCIES`
Key: `includeIndexFileDependencies` | `boolean` | `false` | Specifies whether to display dependency files when the changed file is referenced from an index.ts in the same directory. | ## Changelog See the GitHub [release history](https://github.com/ysk8hori/danger-plugin-typescript-graph/releases). ## Contributing See [CONTRIBUTING.md](CONTRIBUTING.md). --- _Source: https://npm.io/package/danger-plugin-typescript-graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._