feat!: add AsyncAPI v3 support

examples/simple-react/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@asyncapi/parser": "^1.15.0",
-    "@asyncapi/edavisualiser": "^0.15.0",
+    "@asyncapi/parser": "^3.0.2",
+    "@asyncapi/edavisualiser": "^1.2.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-router-dom": "^5.3.0",

examples/simple-react/src/App.tsx

@@ -6,6 +6,8 @@ import GamingapiSystem from './gamingapi/System';
 import GamingapiApplication from './gamingapi/application';
 import SocialMediaSystem from './social_media/System';
 import SocialMediaApplication from './social_media/application';
+import EdaLearn from './edalearn/System';
+import EdaLearnApplication from './edalearn/application';
 
 export const App = () => {
   return (
@@ -58,6 +60,12 @@ export const App = () => {
           <Route exact path="/social-media/:application">
             <SocialMediaApplication />
           </Route>
+          <Route exact path="/edalearn/">
+            <EdaLearn />
+          </Route>
+          <Route exact path="/edalearn/:application">
+            <EdaLearnApplication />
+          </Route>
         </Switch>
       </div>
     </div>

examples/simple-react/src/SimpleAsyncapi.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { ApplicationView } from '@asyncapi/edavisualiser';
 import '@asyncapi/edavisualiser/styles/default.css';
-import '@asyncapi/parser/dist/bundle';
+import Parser from '@asyncapi/parser/browser';
+
 
 const asyncAPIDocument = `
 asyncapi: '2.4.0'
@@ -219,18 +220,21 @@ components:
 `;
 
 function Asyncapi() {
-  const [document, setDocument] = useState(undefined);
+  const [document, setDocument] = useState<any | undefined>(undefined);
 
   useEffect(() => {
-    const parser = (window as any)['AsyncAPIParser'];
-    const fetchData = async () => setDocument(await parser.parse(asyncAPIDocument));
+    const parser = new Parser();
+    const fetchData = async () => {
+      const {document} = await parser.parse(asyncAPIDocument)
+      setDocument(document);
+    }
     fetchData().catch(console.error);
   }, []);
 
   let node;
   if (document !== undefined) {
     node = (
-      <ApplicationView asyncapi={{ document }} edgeType={'animated'} />
+      <ApplicationView asyncapi={{ document: document }} edgeType={'animated'} />
     );
   } else {
     node = <h1>Wait...</h1>;

examples/simple-react/src/edalearn/System.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react';
+import { SystemView, fromURL} from '@asyncapi/edavisualiser';
+import { apps } from './apps';
+import '@asyncapi/edavisualiser/styles/default.css';
+const AsyncapiParser = require('@asyncapi/parser/browser');
+
+function Asyncapi() {
+  const [asyncapiDocuments, setAsyncapiDocuments] = useState<Array<{ parsedDoc: any, name: string }>>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = [];
+      const parser = new AsyncapiParser.Parser({
+        ruleset: { core:false, recommended:false }
+        });
+      for (const [name, asyncapiUrl] of Object.entries(apps)) {
+        const result = fromURL(parser, asyncapiUrl);
+        const {document, diagnostics} = await result.parse();
+        console.log(diagnostics)
+        if(document)
+          data.push({ parsedDoc: document, name });
+      }
+      setAsyncapiDocuments(data);
+    };
+
+    fetchData().catch(console.error);
+  }, []);
+
+  let node;
+  if (asyncapiDocuments.length > 0) {
+    node = (
+      <SystemView 
+        applications={asyncapiDocuments.map(({ parsedDoc, name }) => {
+          return {
+            asyncapi: {
+              document: parsedDoc,
+              topExtended: (
+                <div className="flex justify-between mb-4">
+                  <a
+                    className="leading-6 text-gray-900 uppercase text-xs font-light"
+                    href={'/EDAVisualiser/edalearn/' + name}
+                  >
+                    <button
+                      style={{
+                        backgroundColor: 'rgba(110, 231, 183, 1)',
+                        padding: '0 10px',
+                      }}
+                    >
+                      Focus application
+                    </button>
+                  </a>
+                </div>
+              )
+            },
+          }
+        })}
+      />
+    );
+  } else {
+    node = <h1>Wait...</h1>;
+  }
+  return <div className="App">{node}</div>;
+}
+
+export default Asyncapi;

examples/simple-react/src/edalearn/application.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { ApplicationFocusView, fromURL } from '@asyncapi/edavisualiser';
+import { apps } from './apps';
+import '@asyncapi/edavisualiser/styles/default.css';
+const AsyncapiParser = require('@asyncapi/parser/browser');
+
+
+function Asyncapi() {
+  const [externalApplications, setAsyncapiDocuments] = useState<Array<{ parsedDoc: any, name: string }>>([]);
+  const [focusedApplication, setFocusedApplication] = useState<{ parsedDoc: any, name: string }>();
+  let { application } = useParams<{ application: string }>();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = [];
+      const parser = new AsyncapiParser.Parser({
+        ruleset: { core: false, recommended: false }
+        });
+      for (const [name, asyncapiUrl] of Object.entries(apps)) {
+        const result = fromURL(parser, asyncapiUrl);
+        const {document} = await result.parse();
+        if (application === name) {
+          setFocusedApplication({ parsedDoc: document, name });
+        } else {
+          data.push({ parsedDoc: document, name });
+        }
+      }
+      setAsyncapiDocuments(data);
+    };
+
+    fetchData().catch(console.error);
+  }, [application]);
+
+  let node;
+  if (externalApplications.length > 0 && focusedApplication !== undefined) {
+    node = (
+      <ApplicationFocusView
+        asyncapi={{ document: focusedApplication.parsedDoc }}
+        external={externalApplications.map(({ parsedDoc, name }) => {
+          return {
+            asyncapi: {
+              document: parsedDoc,
+              topExtended: (
+                <div className="flex justify-between mb-4">
+                  <a
+                    className="leading-6 text-gray-900 uppercase text-xs font-light"
+                    href={'/EDAVisualiser/edalearn/' + name}
+                  >
+                    <button
+                      style={{
+                        backgroundColor: 'rgba(110, 231, 183, 1)',
+                        padding: '0 10px',
+                      }}
+                    >
+                      Focus application
+                    </button>
+                  </a>
+                </div>
+              )
+            }
+          }
+        })}
+      />
+    );
+  } else {
+    node = <h1>Wait...</h1>;
+  }
+  return <div className="App">{node}</div>;
+}
+
+export default Asyncapi;

examples/simple-react/src/edalearn/apps.js

@@ -0,0 +1,8 @@
+export const apps = {
+  customers:
+    'https://raw.githubusercontent.com/EDALearn/FoodDeliveryService-KIT-AsyncAPI-In-Action/main/modules/customers/src/main/resources/apis/asyncapi.yml',
+  orders:
+    'https://raw.githubusercontent.com/EDALearn/FoodDeliveryService-KIT-AsyncAPI-In-Action/main/modules/orders/src/main/resources/apis/asyncapi.yml',
+  restaurants: 'https://raw.githubusercontent.com/EDALearn/FoodDeliveryService-KIT-AsyncAPI-In-Action/main/modules/restaurants/src/main/resources/apis/asyncapi.yml',
+  delivery: 'https://raw.githubusercontent.com/EDALearn/FoodDeliveryService-KIT-AsyncAPI-In-Action/main/modules/delivery/src/main/resources/apis/asyncapi.yml'
+};

examples/simple-react/src/gamingapi/System.tsx

@@ -1,19 +1,20 @@
 import { useState, useEffect } from 'react';
-import { SystemView } from '@asyncapi/edavisualiser';
+import { SystemView, fromURL } from '@asyncapi/edavisualiser';
 import { apps } from './apps';
-import '@asyncapi/parser/dist/bundle';
 import '@asyncapi/edavisualiser/styles/default.css';
+import Parser from '@asyncapi/parser/browser';
 
 function Asyncapi() {
   const [asyncapiDocuments, setAsyncapiDocuments] = useState<Array<{ parsedDoc: any, name: string }>>([]);
 
   useEffect(() => {
-    const parser = (window as any)['AsyncAPIParser'];
     const fetchData = async () => {
+      const parser = new Parser();
       const data = [];
       for (const [name, asyncapiUrl] of Object.entries(apps)) {
-        const parsedDoc = await parser.parseFromUrl(asyncapiUrl);
-        data.push({ parsedDoc, name });
+        const result = fromURL(parser, asyncapiUrl);
+        const {document} = await result.parse();
+        data.push({ parsedDoc: document, name });
       }
       setAsyncapiDocuments(data);
     };

examples/simple-react/src/gamingapi/application.tsx

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { ApplicationFocusView } from '@asyncapi/edavisualiser';
-import '@asyncapi/parser/dist/bundle';
+import { ApplicationFocusView, fromURL } from '@asyncapi/edavisualiser';
 import { apps } from './apps';
 import '@asyncapi/edavisualiser/styles/default.css';
+const AsyncapiParser = require('@asyncapi/parser/browser');
 
 function Asyncapi() {
   const [externalApplications, setAsyncapiDocuments] = useState<Array<{ parsedDoc: any, name: string }>>([]);
@@ -13,14 +13,17 @@ function Asyncapi() {
   useEffect(() => {
     const fetchData = async () => {
       const data = [];
-      const parser = (window as any)['AsyncAPIParser'];
+      const parser = new AsyncapiParser.Parser();
       for (const [name, asyncapiUrl] of Object.entries(apps)) {
+        const result = fromURL(parser, asyncapiUrl);
+        const {document} = await result.parse();
         if (application === name) {
-          const parsedDoc = await parser.parseFromUrl(asyncapiUrl);
-          setFocusedApplication({ parsedDoc, name });
+          if(document === undefined) {
+            return;
+          }
+          setFocusedApplication({ parsedDoc: document, name });
         } else {
-          const parsedDoc = await parser.parseFromUrl(asyncapiUrl);
-          data.push({ parsedDoc, name });
+          data.push({ parsedDoc: document, name });
         }
       }
       setAsyncapiDocuments(data);
@@ -38,11 +41,10 @@ function Asyncapi() {
           return {
             asyncapi: {
               document: parsedDoc,
-              topExtended: (
-                <div className="flex justify-between mb-4">
+              topExtended: (<div className="flex justify-between mb-4">
                   <a
                     className="leading-6 text-gray-900 uppercase text-xs font-light"
-                    href={'EDAVisualiser/gamingapi/' + name}
+                    href={'/EDAVisualiser/gamingapi/' + name}
                   >
                     <button
                       style={{
@@ -53,8 +55,7 @@ function Asyncapi() {
                       Focus application
                     </button>
                   </a>
-                </div>
-              )
+                </div>)
             }
           }
         })}

examples/simple-react/src/module.d.ts

@@ -0,0 +1 @@
+declare module '@asyncapi/parser/browser';

examples/simple-react/src/social_media/System.tsx

@@ -2,19 +2,19 @@ import { useState, useEffect } from 'react';
 import { SystemView } from '@asyncapi/edavisualiser';
 import { Menu } from './menu';
 import { apps } from './apps';
-import '@asyncapi/parser/dist/bundle';
 import '@asyncapi/edavisualiser/styles/default.css';
+const AsyncapiParser = require('@asyncapi/parser/browser');
 
 function Asyncapi() {
   const [asyncapiDocuments, setAsyncapiDocuments] = useState<Array<{ parsedDoc: any, name: string }>>([]);
 
   useEffect(() => {
-    const parser = (window as any)['AsyncAPIParser'];
+    const parser = new AsyncapiParser.Parser();
     const fetchData = async () => {
       const data = [];
       for (const [name, asyncapiUrl] of Object.entries(apps)) {
-        const parsedDoc = await parser.parse(asyncapiUrl);
-        data.push({ parsedDoc, name });
+        const {document} = await parser.parse(asyncapiUrl);
+        data.push({ parsedDoc: document, name });
       }
       setAsyncapiDocuments(data);
     };

examples/simple-react/src/social_media/application.tsx

@@ -3,9 +3,8 @@ import { Menu } from './menu';
 import { useParams } from 'react-router-dom';
 import { ApplicationFocusView } from '@asyncapi/edavisualiser';
 import { apps } from './apps';
-import '@asyncapi/parser/dist/bundle';
-
 import '@asyncapi/edavisualiser/styles/default.css';
+const AsyncapiParser = require('@asyncapi/parser/browser');
 
 function Asyncapi() {
   const [externalApplications, setAsyncapiDocuments] = useState<Array<{ parsedDoc: any, name: string }>>([]);
@@ -15,14 +14,14 @@ function Asyncapi() {
   useEffect(() => {
     const fetchData = async () => {
       const data = [];
-      const parser = (window as any)['AsyncAPIParser'];
+      const parser = new AsyncapiParser.Parser();
       for (const [name, asyncapi] of Object.entries(apps)) {
         if (application === name) {
-          const parsedDoc = await parser.parse(asyncapi);
-          setFocusedApplication({ parsedDoc, name });
+          const {document} = await parser.parse(asyncapi);
+          setFocusedApplication({ parsedDoc: document, name });
         } else {
-          const parsedDoc = await parser.parse(asyncapi);
-          data.push({ parsedDoc, name });
+          const {document} = await parser.parse(asyncapi);
+          data.push({ parsedDoc: document, name });
         }
       }
       setAsyncapiDocuments(data);

examples/simple-react/tsconfig.json

@@ -21,6 +21,7 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src", 
+    "types"
   ]
 }