docstodev 1.0.0 → 1.0.2

package/src/exporters/html.ts

@@ -1,142 +1,558 @@
-// Emplacement absolu : M:\workspace\extensions\docstodev\src\exporters\html.ts
 import { writeFileSync } from "node:fs";
 import path from "node:path";
 
-export function exportToHTML(docsDir: string, markdownContent: string, mermaidGraph: string, lang: "fr" | "en" = "fr") {
-    const lines = markdownContent.split('\n');
+interface TreeStructure {
+    [key: string]: TreeStructure | null;
+}
+
+export function exportToHTML(
+    docsDir: string,
+    markdownContent: string,
+    mermaidGraph: string,
+    lang: "fr" | "en" = "fr",
+    fileTree?: TreeStructure
+) {
+    const lines = markdownContent.split("\n");
+
     let htmlResult = "";
     let inTable = false;
+    let inSection = false;
 
-    const formatText = (text: string) => {
-        return text
-            .replace(/`(.*?)`/g, '<code>$1</code>')
-            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    const formatText = (text: string) =>
+        text
+            .replace(/`(.*?)`/g, "<code>$1</code>")
+            .replace(/\*\*(.*?)\*\*/g, "$1")
             .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');
-    };
-
-    lines.forEach(line => {
-        let processed = line.trim();
-
-        if (processed.startsWith('|')) {
-            if (!inTable) { htmlResult += '<div class="table-container"><table>'; inTable = true; }
-            if (processed.includes('---')) return;
-            const cells = processed.split('|').filter(c => c.trim() !== "");
-            const tag = (processed.includes('Module') || processed.includes('Type')) ? 'th' : 'td';
-            htmlResult += `<tr>${cells.map(c => `<${tag}>${formatText(c.trim())}</${tag}>`).join('')}</tr>`;
-            return;
-        } else if (inTable) { htmlResult += '</table></div>'; inTable = false; }
-
-        if (processed.includes('├─') || processed.includes('└─') || processed.includes('│')) {
-            const treeLine = line
+
+    for (const line of lines) {
+        const processed = line.trim();
+
+        /* ================= TABLES ================= */
+        if (processed.startsWith("|")) {
+            if (!inTable) {
+                htmlResult += `<div class="table-container"><table>`;
+                inTable = true;
+            }
+            if (processed.includes("---")) continue;
+
+            const cells = processed.split("|").filter(c => c.trim());
+            const isHeader = processed.includes("Module") || processed.includes("Type");
+
+            htmlResult += `<tr>${
+                cells.map(c =>
+                    isHeader
+                        ? `<th>${formatText(c.trim())}</th>`
+                        : `<td>${formatText(c.trim())}</td>`
+                ).join("")
+            }</tr>`;
+            continue;
+        } else if (inTable) {
+            htmlResult += "</table></div>";
+            inTable = false;
+        }
+
+        /* ================= TREE VIEW ================= */
+        if (
+            processed.match(/^[│├└─\s]+/) ||
+            processed.includes("/") ||
+            processed.match(/\.(ts|js|py|java|cs|go|rs|tsx|jsx)$/)
+        ) {
+            const hasFile = processed.match(/\.(ts|js|py|java|cs|go|rs|tsx|jsx)$/);
+            const fileMatch = hasFile ? processed.match(/([\w-]+\.(ts|js|py|java|cs|go|rs|tsx|jsx))/)?.[0] : null;
+            
+            let treeLine = line
                 .replace(/├─/g, '<span class="branch">├─</span>')
                 .replace(/└─/g, '<span class="branch">└─</span>')
                 .replace(/│/g, '<span class="pipe">│</span>');
+
+            if (fileMatch) {
+                treeLine = treeLine.replace(
+                    fileMatch,
+                    `<span class="file-badge">${fileMatch}</span>`
+                );
+            }
+
             htmlResult += `<div class="tree-line">${formatText(treeLine)}</div>`;
-            return;
+            continue;
         }
 
-        if (processed.startsWith('# ')) {
-            htmlResult += `<h1>${processed.replace('# ', '')}</h1>`;
-        } else if (processed.startsWith('## ')) {
-            htmlResult += `<h2>${processed.replace('## ', '')}</h2>`;
-        } else if (processed.startsWith('### ')) {
-            if (htmlResult.includes('</section>')) htmlResult += '</section>';
-            htmlResult += `<section class="component-card"><h3 class="comp-title">${formatText(processed.replace('### ', ''))}</h3>`;
-        } else if (processed.startsWith('•') || processed.startsWith('- ') || processed.startsWith('* ')) {
-            htmlResult += `<div class="list-item">${formatText(processed.replace(/^[\-\*•]\s+/, ''))}</div>`;
-        } else if (processed.length > 0) {
+        /* ================= HEADERS ================= */
+        if (processed.startsWith("# ")) {
+            htmlResult += `<h1>${processed.slice(2)}</h1>`;
+        } else if (processed.startsWith("## ")) {
+            if (inSection) {
+                htmlResult += "</section>";
+                inSection = false;
+            }
+            htmlResult += `<h2>${processed.slice(3)}</h2>`;
+        } else if (processed.startsWith("### ")) {
+            if (inSection) htmlResult += "</section>";
+            htmlResult += `<section class="component"><h3>${formatText(processed.slice(4))}</h3>`;
+            inSection = true;
+        }
+
+        /* ================= LISTS ================= */
+        else if (/^[-*•]\s+/.test(processed)) {
+            htmlResult += `<div class="list-item">${formatText(processed.replace(/^[-*•]\s+/, ""))}</div>`;
+        }
+
+        /* ================= PARAGRAPHS ================= */
+        else if (processed.length > 0) {
             htmlResult += `<p>${formatText(processed)}</p>`;
         }
-    });
+    }
+
+    if (inSection) htmlResult += "</section>";
 
-    if (htmlResult.includes('<section')) htmlResult += '</section>';
+    // Générer la vue hiérarchique dynamiquement
+    const hierarchyGraph = fileTree ? generateHierarchyGraph(fileTree) : getDefaultHierarchyGraph();
+    
+    // Générer le flux de données (peut être personnalisé selon les imports/exports)
+    const dataFlowGraph = generateDataFlowGraph();
 
     const html = `<!DOCTYPE html>
 <html lang="${lang}" data-theme="dark">
 <head>
-    <meta charset="UTF-8">
-    <title>DocsToDev | Rapport Technique</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Fira+Code:wght@400&display=swap" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-    <style>
-        :root[data-theme="dark"] {
-            --bg: #0d1117; --card: #161b22; --text: #c9d1d9; --text-dim: #8b949e;
-            --accent: #58a6ff; --border: #30363d; --code-bg: rgba(110, 118, 129, 0.2);
-            --code-text: #ff7b72; --h-color: #f0f6fc;
-        }
-        :root[data-theme="light"] {
-            --bg: #ffffff; --card: #f8f9fa; --text: #24292f; --text-dim: #57606a;
-            --accent: #0969da; --border: #d0d7de; --code-bg: #afb8c133;
-            --code-text: #cf222e; --h-color: #1b1f24;
-        }
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>DocsToDev – Rapport Technique</title>
 
-        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); padding: 2rem; line-height: 1.6; font-weight: 300; transition: background 0.3s; }
-        .container { max-width: 1100px; margin: auto; }
-        
-        .controls { position: sticky; top: 10px; display: flex; gap: 1rem; margin-bottom: 2rem; z-index: 100; }
-        #search { flex: 1; padding: 12px 20px; border-radius: 25px; border: 1px solid var(--border); background: var(--card); color: var(--text); outline: none; font-weight: 300; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
-        .btn { padding: 10px 20px; border-radius: 25px; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
-        .pdf-btn { background: #238636; color: white; border: none; }
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Fira+Code&display=swap" rel="stylesheet">
+<script defer src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 
-        h1 { font-weight: 500; font-size: 2.2rem; color: var(--accent); letter-spacing: -1px; }
-        h2 { font-weight: 400; color: var(--h-color); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-top: 3.5rem; }
-        
-        .mermaid { background: var(--card); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border); margin: 1.5rem 0; overflow: auto; }
-        .component-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
-        .comp-title { margin: 0 0 1rem 0 !important; color: var(--accent) !important; font-weight: 400; font-size: 1.2rem; border-bottom: 1px solid var(--border); padding-bottom: 10px !important; }
-
-        .tree-line { font-family: 'Fira Code', monospace; font-size: 0.85rem; color: var(--text-dim); white-space: pre; line-height: 1.4; }
-        .branch { color: var(--accent); opacity: 0.7; }
-
-        .table-container { margin: 1.5rem 0; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; }
-        table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
-        th { background: rgba(88, 166, 255, 0.05); color: var(--accent); font-weight: 500; text-align: left; padding: 12px; border-bottom: 1px solid var(--border); }
-        td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
-
-        code { font-family: 'Fira Code', monospace; background: var(--code-bg); color: var(--code-text); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; font-weight: 400; }
-        a { color: var(--accent); text-decoration: none; }
-        .list-item { margin-bottom: 8px; }
-        .list-item::before { content: "•"; color: var(--accent); margin-right: 12px; font-weight: bold; }
-        
-        @media print { .controls { display: none; } body { padding: 0; } .container { max-width: 100%; border: none; } }
-    </style>
+<style>
+:root[data-theme="dark"] {
+    --bg: #0d1117;
+    --card: #161b22;
+    --text: #c9d1d9;
+    --muted: #8b949e;
+    --border: #30363d;
+    --accent: #58a6ff;
+    --code-bg: #1f2428;
+    --file-badge-bg: rgba(248, 81, 73, 0.15);
+    --file-badge-text: #f85149;
+}
+
+:root[data-theme="light"] {
+    --bg: #ffffff;
+    --card: #f6f8fa;
+    --text: #24292f;
+    --muted: #57606a;
+    --border: #d0d7de;
+    --accent: #0969da;
+    --code-bg: #eaeef2;
+    --file-badge-bg: rgba(218, 54, 51, 0.15);
+    --file-badge-text: #da3633;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Inter, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.controls {
+    position: sticky;
+    top: 0;
+    background: var(--bg);
+    padding: 1rem 0;
+    display: flex;
+    gap: 0.75rem;
+    z-index: 100;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 2rem;
+}
+
+#search {
+    flex: 1;
+    padding: 0.6rem 1rem;
+    border: 1px solid var(--border);
+    background: var(--card);
+    color: var(--text);
+    font-size: 0.95rem;
+    font-family: Inter, sans-serif;
+    transition: border-color 0.2s;
+}
+
+#search:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+button {
+    padding: 0.6rem 1.2rem;
+    border: 1px solid var(--border);
+    background: var(--card);
+    color: var(--text);
+    cursor: pointer;
+    font-size: 0.95rem;
+    font-family: Inter, sans-serif;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+button:hover {
+    background: var(--border);
+}
+
+button svg {
+    width: 16px;
+    height: 16px;
+}
+
+h1 {
+    font-size: 2.5rem;
+    color: var(--accent);
+    margin-bottom: 3rem;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+}
+
+h2 {
+    font-size: 1.5rem;
+    margin: 3rem 0 1.5rem 0;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--border);
+    font-weight: 400;
+    color: var(--text);
+}
+
+h3 {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    color: var(--accent);
+    font-weight: 400;
+}
+
+.graphs-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    gap: 2rem;
+    margin: 2rem 0;
+}
+
+.graph-container {
+    border: 1px solid var(--border);
+    background: var(--card);
+    padding: 1.5rem;
+}
+
+.graph-title {
+    font-size: 1rem;
+    color: var(--muted);
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.85rem;
+}
+
+.component {
+    border: 1px solid var(--border);
+    background: var(--card);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.tree-line {
+    font-family: "Fira Code", monospace;
+    font-size: 0.85rem;
+    white-space: pre;
+    color: var(--muted);
+    line-height: 1.8;
+}
+
+.branch { 
+    color: var(--accent); 
+}
+
+.pipe { 
+    color: var(--border); 
+}
+
+.file-badge {
+    background: var(--file-badge-bg);
+    color: var(--file-badge-text);
+    padding: 0.15rem 0.5rem;
+    font-size: 0.8rem;
+    font-family: "Fira Code", monospace;
+    display: inline-block;
+    margin-left: 0.25rem;
+}
+
+.table-container {
+    border: 1px solid var(--border);
+    margin: 1.5rem 0;
+    overflow-x: auto;
+    background: var(--card);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+}
+
+th, td {
+    border-bottom: 1px solid var(--border);
+    padding: 0.75rem 1rem;
+    text-align: left;
+}
+
+th {
+    background: var(--bg);
+    color: var(--muted);
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    letter-spacing: 0.05em;
+    font-weight: 400;
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+code {
+    font-family: "Fira Code", monospace;
+    background: var(--code-bg);
+    padding: 0.2rem 0.4rem;
+    font-size: 0.9em;
+    color: var(--accent);
+}
+
+.list-item {
+    margin-bottom: 0.5rem;
+    padding-left: 1.5rem;
+    position: relative;
+}
+
+.list-item::before {
+    content: "";
+    position: absolute;
+    left: 0.5rem;
+    top: 0.7rem;
+    width: 4px;
+    height: 4px;
+    background: var(--accent);
+}
+
+p {
+    margin-bottom: 1rem;
+    color: var(--muted);
+}
+
+a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+mark {
+    background: #ffd33d;
+    color: #000;
+    padding: 0.1rem 0.3rem;
+}
+
+.mermaid {
+    background: transparent;
+    overflow: auto;
+}
+
+@media print {
+    .controls {
+        display: none;
+    }
+    
+    .container {
+        max-width: 100%;
+        padding: 0;
+    }
+    
+    .component {
+        page-break-inside: avoid;
+    }
+}
+
+@media (max-width: 768px) {
+    .graphs-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .controls {
+        flex-direction: column;
+    }
+}
+</style>
 </head>
+
 <body>
-    <div class="container">
-        <div class="controls">
-            <input type="text" id="search" placeholder="Rechercher par nom, rôle, technologie...">
-            <button class="btn pdf-btn" onclick="window.print()">📥 Imprimer / PDF</button>
-            <button class="btn" onclick="toggleTheme()">🌓 Theme</button>
-        </div>
+<div class="container">
 
-        <h2>📊 Graphe des Dépendances</h2>
+<div class="controls">
+    <input id="search" placeholder="${lang === 'fr' ? 'Rechercher dans la documentation...' : 'Search in documentation...'}" type="text">
+    <button onclick="toggleTheme()">
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+        </svg>
+        ${lang === 'fr' ? 'Thème' : 'Theme'}
+    </button>
+    <button onclick="window.print()">
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
+        </svg>
+        ${lang === 'fr' ? 'Exporter PDF' : 'Export PDF'}
+    </button>
+</div>
+
+<h2>${lang === 'fr' ? 'Architecture du projet' : 'Project Architecture'}</h2>
+<div class="graphs-grid">
+    <div class="graph-container">
+        <div class="graph-title">${lang === 'fr' ? 'Graphe des dépendances' : 'Dependency Graph'}</div>
         <div class="mermaid">
-            graph TD
-            ${mermaidGraph || "A[Projet] --> B[Initialisation]"}
+${mermaidGraph || "graph TD\n    Root[Projet]"}
         </div>
+    </div>
+    
+    <div class="graph-container">
+        <div class="graph-title">${lang === 'fr' ? 'Structure du projet' : 'Project Structure'}</div>
+        <div class="mermaid">
+${hierarchyGraph}
+        </div>
+    </div>
+</div>
 
-        <div id="content-area">${htmlResult}</div>
+<div class="graph-container" style="margin-bottom: 3rem;">
+    <div class="graph-title">${lang === 'fr' ? 'Flux de données' : 'Data Flow'}</div>
+    <div class="mermaid">
+${dataFlowGraph}
     </div>
+</div>
 
-    <script>
-        mermaid.initialize({ startOnLoad: true, theme: 'dark', securityLevel: 'loose' });
-        function toggleTheme() {
-            const html = document.documentElement;
-            const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
-            html.setAttribute('data-theme', next);
-            localStorage.setItem('docs-theme', next);
-        }
-        document.documentElement.setAttribute('data-theme', localStorage.getItem('docs-theme') || 'dark');
+<div id="content-area">${htmlResult}</div>
+
+</div>
 
-        document.getElementById('search').addEventListener('input', (e) => {
-            const term = e.target.value.toLowerCase();
-            document.querySelectorAll('.component-card, .tree-line, .table-container').forEach(el => {
-                el.style.display = el.innerText.toLowerCase().includes(term) ? '' : 'none';
-            });
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+    if (window.mermaid) {
+        mermaid.initialize({ 
+            startOnLoad: true, 
+            theme: document.documentElement.dataset.theme === "dark" ? "dark" : "default",
+            themeVariables: {
+                darkMode: document.documentElement.dataset.theme === "dark",
+                background: "transparent",
+                primaryColor: "#58a6ff",
+                primaryTextColor: "#c9d1d9",
+                primaryBorderColor: "#30363d",
+                lineColor: "#8b949e",
+                secondaryColor: "#161b22",
+                tertiaryColor: "#0d1117"
+            }
         });
-    </script>
+    }
+});
+
+function toggleTheme() {
+    const root = document.documentElement;
+    const next = root.dataset.theme === "dark" ? "light" : "dark";
+    root.dataset.theme = next;
+    localStorage.setItem("theme", next);
+    
+    if (window.mermaid) {
+        location.reload();
+    }
+}
+
+document.documentElement.dataset.theme = localStorage.getItem("theme") || "dark";
+
+const originalHTML = document.getElementById("content-area").innerHTML;
+
+document.getElementById("search").addEventListener("input", e => {
+    const term = e.target.value.trim();
+    const container = document.getElementById("content-area");
+
+    if (!term) {
+        container.innerHTML = originalHTML;
+        return;
+    }
+
+    const regex = new RegExp("(" + term.replace(/[.*+?^\\\${}()|[\\]\\\\]/g, "\\\\$&") + ")", "gi");
+    container.innerHTML = originalHTML.replace(regex, "<mark>$1</mark>");
+
+    const first = container.querySelector("mark");
+    if (first) first.scrollIntoView({ behavior: "smooth", block: "center" });
+});
+</script>
+
 </body>
 </html>`;
 
     writeFileSync(path.join(docsDir, "report.html"), html);
+}
+
+function generateHierarchyGraph(tree: TreeStructure, maxDepth = 3): string {
+    let graph = "graph TD\n";
+    let nodeId = 0;
+    const nodeMap = new Map<string, string>();
+    
+    function traverse(obj: TreeStructure, parentId: string | null, depth: number, prefix = ""): void {
+        if (depth > maxDepth) return;
+        
+        const entries = Object.entries(obj).slice(0, 8); // Limiter pour lisibilité
+        
+        entries.forEach(([key, value]) => {
+            const currentId = `node${nodeId++}`;
+            const isFolder = value && typeof value === 'object' && Object.keys(value).length > 0;
+            const label = isFolder ? `${key}/` : key;
+            
+            nodeMap.set(currentId, label);
+            graph += `    ${currentId}["${label}"]\n`;
+            
+            if (parentId) {
+                graph += `    ${parentId} --> ${currentId}\n`;
+            }
+            
+            if (isFolder && value) {
+                traverse(value, currentId, depth + 1, prefix + key + "/");
+            }
+        });
+    }
+    
+    traverse(tree, null, 0);
+    return graph || getDefaultHierarchyGraph();
+}
+
+function getDefaultHierarchyGraph(): string {
+    return `graph TD
+    A[Root] --> B[src]
+    A --> C[config]
+    B --> D[components]
+    B --> E[utils]
+    B --> F[services]`;
+}
+
+function generateDataFlowGraph(): string {
+    return `graph LR
+    A[Input] --> B[Analyzer]
+    B --> C[Parser]
+    C --> D[Generator]
+    D --> E[Exporter]
+    E --> F[Output]`;
 }

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}