import-tree(WIP)

A super fast tool that uses swc to detect and build JavaScript/TypeScript module graph.

Features

• ⚡ Blazing fast ESM/CJS modules scanner [WIP]
• 🌈 Interactive module relation graph view [WIP]
• ⚒️ Strict import diagnosis based on eslint-plugin-import rules [todo]
• 🌿 Rich plugins support (vscode, vite, rollup, webpack) [todo]

Why import-tree

Javascript module graph is very useful for

• dead code elimination
• code shift
• code quality diagnosis
• codebase structure analysis

and just like madge and dependency-cruiser, import-tree is a more powerful and faster tool to get you there.

Screenshot

Install

$ npm i -g import-tree

Usage

Usage: import-tree [options]

CLI to some JavaScript string utilities

Options:
  -V, --version           output the version number
  -t, --target <file>     target file's relative or absolute path
  -r, --root <directory>  target codebase root directory (default: "./")
  -d, --depth <number>    import relation tree's depth (default: "2")
  -a, --alias <alias>     module path alias
  -o, --output <file>     parsing result's file path (default: "./import.json")
  -h, --help              display help for command

$ it -t ./src/index.js -d 3 # parse target file with custom import-tree depth, depth starts from 0
$ it -t ./src/index.js -r ../root # parse target file in specific root directory
$ it -t ./**/index.js -r ../root # parse target files of glob pattern
$ it -t ./src/index.js -o ./graph.html # parse target file and output graph html 
$ it -t ./src/index.js -o ./import.json # parse target file and output json file

Benchmark

import-tree tested its Nodejs api's benchmark in multiple popular third-party git repos.

System:
  OS: macOS 13.6
  CPU: (12) arm64 Apple M2 Pro
  Memory: 68.25 MB / 16.00 GB
  Shell: 3.2.57 - /bin/sh
Binaries:
  Node: 18.17.1 
  Yarn: 1.22.19 
  npm: 9.6.7 
  pnpm: 8.8.0 

repo	file type	parsed files	import links	import depth	average time(ns)	graph
[email protected]	.js	59	132	3	12,249,262.50	view
[email protected]	.ts	205	877	3	351,465,279.17	view
[email protected]	.ts .tsx	230	886	3	57,522,687.48	view
[email protected]	.ts .tsx	658	2282	3	332,391,816.69	view

Roadmap

v0.1.x [WIP]

• rust parser
  • construct import tree with specific depth ✔️
  • parse esm static import/export syntax
  • resolve internal/external module path
  • compute circular dependencies
  • handle exception robustly
• npm core
  • cross-platform fast Nodejs api
  • parse target files of glob pattern ✔️
• npm cli
  • output import tree in json & html format ✔️
  • meaningful process log
  • check circular dependencies
• module graph
  • graph chart renderer ✔️
  • dark mode ✔️
  • circular import highlight