DePon!!

"DePon!!" is a tool for visualizing the dependencies of JS/TS-based projects. It provides both a CLI and functions.

In the future, it will also offer the feature to visualize dependencies as a graph.

Installation

"DePon!!" can be installed via npm.

# install
npm install depon

or CLI tools are also provided.

# cli
npx depon --help

CLI

The CLI provides the following commands:

• tree
  • Displays file dependencies in a tree format.
• list
  • Displays file dependencies in a list format.

Examples targeting ./examples are shown below.

Tree Command

Displays the dependencies of the target file in a tree format.

# input
npx depon tree --target-dir ./examples ./examples/src/index.ts

# output
🌲 Dependency Tree 🌲

✔ Analysis Complete !!

👶 Children Tree 👶
└── examples/src/index.ts
    ├── examples/src/elements/A (depth:1)/index.tsx
    │   ├── examples/src/elements/A (depth:1)/C (depth:2)/index.ts
    │   │   ├── examples/src/elements/A (depth:1)/C (depth:2)/F (depth:3)/index.tsx
    │   │   │   └── examples/src/elements/A (depth:1)/C (depth:2)/F (depth:3)/H (depth: 4)/index.tsx
    │   │   │       └── examples/src/elements/A (depth:1)/C (depth:2)/F (depth:3)/H (depth: 4)/I (depth: 5)/index.tsx
    │   │   └── examples/src/elements/A (depth:1)/C (depth:2)/G (depth:3)/index.tsx
    │   └── examples/src/elements/A (depth:1)/D (depth:2)/index.tsx
    └── examples/src/elements/B (depth:1)/index.tsx
        └── examples/src/elements/B (depth:1)/E (depth:2)/index.tsx

🎅 Parents Tree 🎅
└── examples/src/index.ts

Option	Type	Description	Default Value
target-dir*	string	Specify the target directory	None
--no-children	boolean	Do not display child dependencies	false
--no-parents	boolean	Do not display parent dependencies	false
--absolute	string	Display as absolute paths	false
--depth	string	Specify the depth to search (root is 0)	None
--ignore-patterns	string	Specify patterns of files/directories to exclude from analysis	None
--alias-resolver	record	If { "@" : ".", "~" : ".." }, then it would be ~/@/path will be replaced as .././path	None

List Command

Displays the dependencies of the target file in a list format.

# input
npx depon list --target-dir ./examples ./examples/src/index.ts

# output
📋 Dependency List 📋

✔ Analysis Complete !!

👶 Children List 👶
examples/src/elements/A (depth:1)/index.tsx
examples/src/elements/A (depth:1)/C (depth:2)/index.ts
examples/src/elements/A (depth:1)/C (depth:2)/F (depth:3)/index.tsx
examples/src/elements/A (depth:1)/C (depth:2)/F (depth:3)/H (depth: 4)/index.tsx
examples/src/elements/A (depth:1)/C (depth:2)/F (depth:3)/H (depth: 4)/I (depth: 5)/index.tsx
examples/src/elements/A (depth:1)/C (depth:2)/G (depth:3)/index.tsx
examples/src/elements/A (depth:1)/D (depth:2)/index.tsx
examples/src/elements/B (depth:1)/index.tsx
examples/src/elements/B (depth:1)/E (depth:2)/index.tsx

🎅 Parents List 🎅

Option	Type	Description	Default Value
target-dir*	string	Specify the target directory	None
--no-children	boolean	Do not display child dependencies	false
--no-parents	boolean	Do not display parent dependencies	false
--absolute	string	Display as absolute paths	false
--depth	string	Specify the depth to search (root is 0)	None
--ignore-patterns	string	Specify patterns of files/directories to exclude from analysis	None
--alias-resolver	record	If { "@" : ".", "~" : ".." }, then it would be ~/@/path will be replaced as .././path	None

API

The API provides the following functions under generator and analyzer.

• generator
  • Analyze dependencies from the target directory.
  • genFileRelation
• analyzer
  • Get dependencies from the analysis results.
  • getChildrenList
  • getParentsList
  • getChildrenTree
  • getParentsTree

Below is a concrete example.

import {
  genFileRelation,
  getChildrenList,
  getParentsList,
  getChildrenTree,
  getParentsTree,
} from "depon";

const targetDir = "./examples/src";

const fileRelation = genFileRelation({ targetDir });

// Get a list of files that depend on main.tsx
const childrenList = getChildrenList(fileRelation, "main.tsx");
const parentsList = getParentsList(fileRelation, "main.tsx");

// Get a tree of files that depend on main.tsx
const childrenTree = getChildrenTree(fileRelation, "main.tsx");
const parentsTree = getParentsTree(fileRelation, "main.tsx");

---

genFileRelation

Arguments for genFileRelation

Argument	Type	Description
targetDir	string	Specify the target directory
ignorePatterns	string[] (optional)	Specify patterns of files/directories to exclude
aliasResolver	Record<string, string> (optional)	If { "@" : ".", "~" : ".." }, then it would be ~/@/path will be replaced as .././path.

Return value of genFileRelation

export type ImportType = "import" | "require" | "dynamicImport" | "export";

export type RelationNode = {
  parent: string;
  child: string;
};

export type FileRelationNode = RelationNode & {
  context: {
    importType: ImportType;
    targetType: "file" | "external";
  };
};

Type	Description
FileRelationNode[]	Contains paths of parent and child dependencies

---

getChildrenList, getParentsList

Arguments for getChildrenList, getParentsList

Argument	Type	Description
relationList	FileRelationNode[]	Specify the return value of genFileRelation
targetKey	string	Specify the target file
depth	number?	Specify the depth to search (root is 0)

Return value of getChildrenList, getParentsList

Type	Description
{ key:string }[]	Array containing paths of related files under key

---

getChildrenTree, getParentsTree

Arguments for getChildrenTree, getParentsTree

Argument	Type	Description
relationList	FileRelationNode[]	Specify the return value of genFileRelation
targetKey	string	Specify the target file
depth	number?	Specify the depth to search (root is 0)
stopCondition	(key, depth) => boolean ?	Once the function is true, no further searching is done.

Return value of getChildrenTree, getParentsTree

// Return value of getChildrenTree
type ChildrenTree<T extends RelationNode> = {
  key: string;
  children: ChildrenTree<T>[];
};

// Return value of getParentsTree
type ParentsTree<T extends RelationNode> = {
  key: string;
  parents: ParentsTree<T>[];
};

Type	Description
ChildrenTree | ParentsTree	Have a recursive structure of related file paths in tree form