とある都合でNext.jsの各pageでimportしているtsxファイルを一覧で抽出したかったので、同僚に教えてもらったdependency-cruiserを使ってみました。
CLIでは割とすぐ行けたのですが、APIではあれれ？とハマったので記事にしてみました。

インストール

dependency-cruiserのGithubを見るとサクッと入れられます。
--initオプションで設定ファイルも簡単に出力してくれました。

> pnpm install -d dependency-cruiser
> npx depcruise --init
✔ Where do your source files live? … src
✔ Do your test files live in a separate folder? … no
✔ Looks like you're using a 'tsconfig.json'. Use that? … yes
✔ Full path to your 'tsconfig.json › tsconfig.json
✔ Also regard TypeScript dependencies that exist only before compilation? … yes

  ✔ Successfully created '.dependency-cruiser.js'

CLIで出力してみる

ためしにCLIで出力をしてみました。
Githubの手順に従ってdotを使用して出力をしてみます。dot言語というもので依存関係を出力し、GraphViz dotを使用して可視化してみます。

brew install graphviz
npx depcruise src/app/page.tsx --include-only "^src" --output-type dot | dot -T svg > dependency-graph.svg

以下のように出力できました。（例のために今回は簡単なサンプルで出力しています）

--include-only
- 特定のフォルダ配下のみを対象とするオプション
- これがないと例えば"node_modules"フォルダなど、実行したディレクトリ配下の依存関係を全て出力してくれます
--output-type
- 依存関係等をどのように出力するかのオプション
- textなども指定できます
- 何もしないと、バリデーション結果だけが出力されます

ただ、このままだとhooksのtsファイルも出力されてしまいます。今回はtsxファイルだけを取り出したかったのと、グラフではなく、ファイル一覧が出力したかったのでAPIを使用してみることにしました。

APIを使ってみる

show-dependency-tsx.tsのようなファイルを作って実行できるようにします。

show-dependency-tsx.ts

import { cruise } from 'dependency-cruiser'
import ruleSet from './.dependency-cruiser' // tsファイルで読み込みたかったので、.dependency-cruiserファイルもtsに変更しました

const startFile = 'src/app/page.tsx'

const { output } = await cruise(
  [startFile],
  {
    includeOnly: ['^src'],
    ruleSet, // ここ重要！作成した設定ファイルを読み込まないと情報が出てこない
  },
)

if (typeof output === 'string') {
  console.error(output)
  process.exit(1)
}
const tsxFiles = output.modules
  .filter((module) => module.source.endsWith('.tsx'))
  .map((module) => module.source)

console.log('tsx files:')
tsxFiles.forEach((file) => console.log(file))

tsxを使って実行します

> npx tsx show-dependency-tsx.ts
Used TSX files:
src/app/page.tsx
src/components/ChildComponent.tsx
src/components/descendants/DescendantCompoent.tsx

これでgraphを使用せず、一覧を取得できるようになりました🎉