StackGraph

StackGraph는 타입스크립트 AST 정적 분석을 통해 변수 단위의 의존성을 분석하고 시각화하는 툴킷을 제공해요.

• 컴포넌트 사이의 의존성을 관계도로 시각화해요.
• Stackflow의 push를 추적해 화면간 관계도를 시각화해요.
• 이벤트 로깅 함수를 추적해 페이지에서 발생하는 모든 이벤트를 보여줘요.

StackGraph는 기존 의존성 정적 분석 솔루션과 대비해서 어떤 장점이 있을까요?

• 기존 솔루션은 파일 단위로만 의존성 분석을 했어요.
  • 파일 하나에 여러 export가 있다면 어떤 export가 어디에서 사용되는지 알 수 없어요.
• StackGraph는 타입스크립트 LSP를 사용해 변수 단위로 의존성을 분석해요.
  • export 수에 관계없이 개별 export가 어디에서 사용되는지 알 수 있어요.
• 의존성 분석과 시각화 단계가 분리되어 있어 분석 결과가 프레임워크에 종속되지 않아요.

StackGraph는 아직 알파 버전으로, 모든 릴리즈에서 breaking change가 발생할 수 있어요.

시작하기

StackGraph는 Deno로 작성되었어요. 다음 명령어로 Deno를 설치해요.

$ brew install deno

프로젝트에 TypeScript 파일을 하나 생성하고, StackGraph 인스턴스를 초기화해요.

import { StackGraph } from "https://raw.githubusercontent.com/daangn/stackgraph/main/graph/fluent.ts"

const graph = new StackGraph()

<detail> <summary>VSCode에서 Deno Extension 사용하기</summary> <!-- deno-fmt-ignore -->

VSCode에서 타입스크립트 LSP와 Deno Extension이 충돌하는 것을 막기 위해 .vscode/settings.json에 다음과 같이 설정을 추가해주세요.

{
    "deno.enable": false,
    "deno.enablePaths": ["./deno_scripts", "./some_deno_file.ts"] // 파일 또는 디렉터리 경로
}

더 자세한 내용은 Deno 공식 문서의 설치법과 VSCode에서 사용법을 참고해주세요.

</detail>

데이터 준비하기

다음 형태의 JSON 파일을 준비해주세요.

export type LabelOption = {
	flows: Record<string, {
		type: "push" | "replace"
		to: string
	}[]>
	clicks: Record<string, string[]>
	shows: Record<string, string[]>
}

렌더링하기

$ deno run -A https://raw.githubusercontent.com/daangn/stackgraph/main/render/build.ts <data.json 파일 경로>

$ deno task serve