WIP

asyncapi · Feb 22, 2024 · a530584 · a530584
1 parent 89335b5
commit a530584
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -147,6 +147,7 @@
   "dependencies": {
     "@asyncapi/parser": "^3.0.7",
     "@types/markdown-it": "^13.0.7",
+    "eta": "^3.2.0",
     "markdown-it": "^14.0.0"
   }
 }
diff --git a/src/PreviewMarkdown.ts b/src/PreviewMarkdown.ts
@@ -5,23 +5,25 @@ import * as Markdownit from 'markdown-it';
 import { Parser, fromFile, AsyncAPIDocumentInterface } from '@asyncapi/parser';
 import Info from './components/Info';
 import MermaidDiagram from './components/MermaidDiagram';
+import { Eta } from "eta";
+
+const eta = new Eta({ views: path.join(__dirname, "templates") });
 
 const md = Markdownit('commonmark');
 const parser = new Parser();
 
 function buildMarkdown(document:AsyncAPIDocumentInterface | undefined){
-
+  console.log('Building markdown');
   let content = '';
-
   if(document !== undefined){
-
-    content = `
-      ${Info(document)}
-      ${MermaidDiagram(document)}
-    `;
+    // content = `
+    //   ${Info(document)}
+    //   ${MermaidDiagram(document)}
+    // `;
+    console.log(Info(document));
+    return eta.render("markdown", Info(document));
   }
 
-  return md.render(content);
 }
 
 export function previewMarkdown(context: vscode.ExtensionContext) {
@@ -55,8 +57,8 @@ export async function openAsyncAPIMarkdown(context: vscode.ExtensionContext, uri
       localResourceRoots,
     });
 
-  const { document } = await fromFile(parser, uri.fsPath).parse();   
-  let result =  buildMarkdown(document); 
+  const { document } = await fromFile(parser, uri.fsPath).parse();
+  let result =  buildMarkdown(document);
 
   panel.title = path.basename(uri.fsPath);
   panel.webview.html = getWebviewContent(context, panel.webview, uri, result);
@@ -92,7 +94,7 @@ function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Web
   <!DOCTYPE html>
   <html>
     <head>
-      <style> 
+      <style>
       html{
         scroll-behavior: smooth;
       }
@@ -107,13 +109,11 @@ function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Web
       </style>
     </head>
     <body x-timestamp="${Date.now()}">
-      
       ${result}
       <script src="${mermaidJs}"></script>
       <script>
-        mermaid.initialize({ startOnLoad: true });  
+        mermaid.initialize({ startOnLoad: true });
       </script>
-  
     </body>
   </html>
     `;

diff --git a/src/components/Info.ts b/src/components/Info.ts
@@ -1,7 +1,6 @@
 import {AsyncAPIDocumentInterface } from '@asyncapi/parser';
 
 export default function info(asyncapi:AsyncAPIDocumentInterface) {
-
     const info = asyncapi.info();
     const defaultContentType = asyncapi.defaultContentType();
     const specId = info.id();
@@ -10,7 +9,8 @@ export default function info(asyncapi:AsyncAPIDocumentInterface) {
     const contact = info.contact();
     const externalDocs = info.externalDocs();
     const extensions: any = info.extensions();
-
+    const description = info.description();
+    const tags = info.tags();
     const infoList = [];
     if (specId) {
       infoList.push(`Specification ID: \`${specId}\``);
@@ -42,20 +42,14 @@ export default function info(asyncapi:AsyncAPIDocumentInterface) {
         );
       }
     }
-
-    return (
-        `
-# ${info.title()} ${info.version()} documentation
-    
-${
-  infoList.map((value)=>{
-    return '\n* '+ value;
-  })
-}
-
-![${info.title()}](${(extensions.get('x-logo'))?extensions.get('x-logo').value():null})
+    const data = {
+      title: info.title(),
+      description: description,
+      tags: tags,
+      infoList: infoList,
+      externalDocs: externalDocs,
+      extensions: extensions,
+    };
 
-        
-#### ${info.description()}
-      `);
-}  
+    return data;
+}
diff --git a/src/components/MermaidDiagram.ts b/src/components/MermaidDiagram.ts
@@ -2,6 +2,77 @@ import {AsyncAPIDocumentInterface } from '@asyncapi/parser';
 
 export default function mermaidDiagram(asyncapi:AsyncAPIDocumentInterface){
 
-
-    return ``;
+  const asyncAPIDocument=asyncapi;
+  let mermaidCode = `flowchart TD\n`;
+
+//   mermaidCode += `    subgraph "${asyncAPIDocument.info().title()}"\n`;
+
+//   // Add Servers subgraph
+//   mermaidCode += `        subgraph "Servers"\n`;
+//   Object.entries(asyncAPIDocument.servers).forEach(([serverName, serverInfo]) => {
+//       mermaidCode += `            ${serverName}["${serverName}"]\n`;
+//   });
+mermaidCode += `Sttart --> Stop`;
+//   mermaidCode += `        end\n`;
+
+//   // Add Channels subgraph
+//   mermaidCode += `        subgraph "Channels"\n`;
+//   Object.entries(asyncAPIDocument.channels).forEach(([channelName, channelInfo]) => {
+//       mermaidCode += `            ${channelName}["${channelName}"]\n`;
+//   });
+//   mermaidCode += `        end\n`;
+
+//   // Add Operations subgraph
+//   mermaidCode += `        subgraph "Operations"\n`;
+//   Object.entries(asyncAPIDocument.operations).forEach(([operationName, operationInfo]) => {
+//       mermaidCode += `            ${operationName}["${operationName}"]\n`;
+//   });
+//   mermaidCode += `        end\n`;
+
+//   // Add Messages subgraph
+//   mermaidCode += `        subgraph "Messages"\n`;
+//   Object.entries(asyncAPIDocument.components.arguments.messages).forEach(([messageName, messageInfo]) => {
+//       mermaidCode += `            ${messageName}["${messageName}"]\n`;
+//   });
+//   mermaidCode += `        end\n`;
+
+//   mermaidCode += `    end\n`;
+
+//   // Add connections between servers and channels
+//   Object.entries(asyncAPIDocument.servers).forEach(([serverName]) => {
+//       Object.entries(asyncAPIDocument.channels).forEach(([channelName]) => {
+//           mermaidCode += `    ${serverName} --> ${channelName}\n`;
+//       });
+//   });
+
+//   // Add connections between channels and operations
+//   Object.entries(asyncAPIDocument.channels).forEach(([channelName, channelInfo]) => {
+//       Object.entries(asyncAPIDocument.operations).forEach(([operationName]) => {
+//           if (channelInfo.messages && channelInfo.messages[operationName]) {
+//               mermaidCode += `    ${channelName} --> ${operationName}\n`;
+//           }
+//       });
+//   });
+
+//   // Add connections between channels and messages
+//   Object.entries(asyncAPIDocument.channels).forEach(([channelName, channelInfo]) => {
+//       Object.entries(asyncAPIDocument.components.arguments.messages).forEach(([messageName]) => {
+//           if (channelInfo.messages && channelInfo.messages[messageName]) {
+//               mermaidCode += `    ${channelName} --> ${messageName}\n`;
+//           }
+//       });
+//   });
+
+//   // Add connections between operations and messages
+//   Object.entries(asyncAPIDocument.operations).forEach(([operationName, operationInfo]) => {
+//       Object.entries(asyncAPIDocument.components.arguments.messages).forEach(([messageName]) => {
+//           if (operationInfo.messages && operationInfo.messages[messageName]) {
+//               mermaidCode += `    ${operationName} --> ${messageName}\n`;
+//           }
+//       });
+//   });
+  return mermaidCode;
+
+
+
 }
diff --git a/src/templates/markdown.eta b/src/templates/markdown.eta
@@ -0,0 +1,3 @@
+<header>
+  <h1> <% it %> </h1>
+</header>