@choi2021/next-route-visualizer/dist/cli/visualize.js

🗺️ Visualize Next.js routes as an interactive diagram with advanced function analysis. Supports dynamic route detection, function-based navigation patterns, and comprehensive Next.js route mapping. Generate JSON data and beautiful HTML reports to explore

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.visualizeRoutes = visualizeRoutes;
const path_1 = __importDefault(require("path"));
const promises_1 = __importDefault(require("fs/promises"));
const routeParser_js_1 = require("../parser/routeParser.js");
const child_process_1 = require("child_process");
function visualizeRoutes(targetRoot) {
    return __awaiter(this, void 0, void 0, function* () {
        console.log(`\n🎯 Next.js 라우트 시각화를 시작합니다...`);
        console.log(`📁 프로젝트: ${targetRoot}`);
        console.log(`⏰ 분석 중... 잠시만 기다려주세요.\n`);
        try {
            // 1. 라우트 파싱 (API 제외, 페이지+컴포넌트 포함)
            const parser = new routeParser_js_1.RouteParser(targetRoot, {
                analyzeNavigation: true,
                includeMetadata: true,
            });
            const result = yield parser.parse();
            // 2. API 라우트 제거 및 index 파일 수정 (후처리)
            const filteredNodes = result.nodes.filter((node) => {
                if (node.type === "api" || node.path.startsWith("/api/")) {
                    console.log(`❌ API 라우트 제외: ${node.path}`);
                    return false;
                }
                return true;
            });
            // index 파일들을 루트 경로로 변환
            const fixedNodes = filteredNodes.map((node) => {
                if (node.path === "/index" || node.id === "/index") {
                    console.log(`🏠 index 파일을 루트로 변환: ${node.filePath} -> /`);
                    return Object.assign(Object.assign({}, node), { id: "/", path: "/", label: "/", metadata: Object.assign(Object.assign({}, node.metadata), { depth: 0, segments: [""] }) });
                }
                return node;
            });
            // 중복 노드 제거 (같은 path를 가진 노드들 중 가장 큰 파일 선택)
            const nodeMap = new Map();
            fixedNodes.forEach((node) => {
                const existing = nodeMap.get(node.path);
                if (!existing || node.fileSize > existing.fileSize) {
                    nodeMap.set(node.path, node);
                }
            });
            const uniqueNodes = Array.from(nodeMap.values());
            // API 관련 엣지 제거 및 /index -> / 변환
            const filteredEdges = result.edges
                .filter((edge) => {
                if (edge.source.startsWith("/api/") ||
                    edge.target.startsWith("/api/")) {
                    return false;
                }
                return true;
            })
                .map((edge) => {
                const newEdge = Object.assign({}, edge);
                if (edge.source === "/index")
                    newEdge.source = "/";
                if (edge.target === "/index")
                    newEdge.target = "/";
                return newEdge;
            });
            // 3. 통계 재계산
            const pageNodes = uniqueNodes.filter((n) => n.type === "page");
            const dynamicNodes = uniqueNodes.filter((n) => n.type === "dynamic");
            const finalResult = {
                nodes: uniqueNodes.sort((a, b) => a.path.localeCompare(b.path)),
                edges: filteredEdges,
                summary: {
                    totalPages: pageNodes.length,
                    totalDynamicRoutes: dynamicNodes.length,
                    maxDepth: Math.max(...uniqueNodes.map((n) => n.metadata.depth)),
                    totalNavigationLinks: filteredEdges.length,
                },
            };
            console.log("\n🎉 분석 완료!");
            console.log("================");
            console.log(`📄 페이지: ${finalResult.summary.totalPages}개`);
            console.log(`🔄 다이내믹 라우트: ${finalResult.summary.totalDynamicRoutes}개`);
            console.log(`🔗 네비게이션 링크: ${finalResult.summary.totalNavigationLinks}개`);
            // 4. route-graph.json 저장
            const graphPath = path_1.default.resolve(targetRoot, "route-graph.json");
            yield promises_1.default.writeFile(graphPath, JSON.stringify(finalResult, null, 2));
            console.log(`\n💾 라우트 데이터: ${path_1.default.relative(process.cwd(), graphPath)}`);
            // 5. 시각화 HTML 생성
            const templatePath = path_1.default.resolve(__dirname, "../../visualize.html");
            const outPath = path_1.default.resolve(targetRoot, "route-visualizer.html");
            try {
                let html = yield promises_1.default.readFile(templatePath, "utf8");
                // 데이터 삽입을 위한 안전한 JSON 변환
                const safeJson = JSON.stringify(finalResult, null, 2)
                    .replace(/</g, "\\u003c")
                    .replace(/>/g, "\\u003e");
                // 예제 데이터 로드 함수를 실제 데이터로 교체
                html = html.replace(/fetch\("\.\/example-next\/route-graph\.json"\)/g, `Promise.resolve(${safeJson})`);
                yield promises_1.default.writeFile(outPath, html, "utf8");
                console.log(`🎨 시각화 파일: ${path_1.default.relative(process.cwd(), outPath)}`);
                // 6. 브라우저 자동 오픈
                const openCmd = process.platform === "darwin"
                    ? "open"
                    : process.platform === "win32"
                        ? "start"
                        : "xdg-open";
                (0, child_process_1.exec)(`${openCmd} "${outPath}"`);
                console.log(`\n🌐 브라우저에서 시각화를 확인하세요!`);
                console.log(`💡 Tip: 페이지간 네비게이션 관계를 인터랙티브하게 탐색할 수 있습니다.`);
            }
            catch (_a) {
                console.warn(`⚠️  시각화 템플릿을 찾을 수 없습니다: ${templatePath}`);
                console.log(`📊 대신 route-graph.json을 확인하세요: ${path_1.default.relative(process.cwd(), graphPath)}`);
            }
        }
        catch (error) {
            console.error("❌ 오류:", error.message);
            throw error;
        }
    });
}