update implementation

asyncapi · Mar 9, 2024 · 4ecac89 · 4ecac89
1 parent f8faa34
commit 4ecac89
Show file tree

Hide file tree

Showing 12 changed files with 240 additions and 8 deletions.
diff --git a/examples/simple-react/package.json b/examples/simple-react/package.json
@@ -24,7 +24,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "postinstall": "npm link ../../library/node_modules/react-dom ../../library/node_modules/react ../../library/ @asyncapi/parser",
+    "postinstall": "npm link ../../library/node_modules/react-dom ../../library/node_modules/react ../../library/",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   },

diff --git a/examples/simple-react/src/App.tsx b/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>

diff --git a/examples/simple-react/src/edalearn/System.tsx b/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;
diff --git a/examples/simple-react/src/edalearn/application.tsx b/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;
diff --git a/examples/simple-react/src/edalearn/apps.js b/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'
+};
diff --git a/examples/simple-react/src/gamingapi/System.tsx b/examples/simple-react/src/gamingapi/System.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { SystemView } from '@asyncapi/edavisualiser';
+import { SystemView, fromURL } from '@asyncapi/edavisualiser';
 import { apps } from './apps';
 import '@asyncapi/edavisualiser/styles/default.css';
 const AsyncapiParser = require('@asyncapi/parser/browser');
@@ -12,7 +12,8 @@ function Asyncapi() {
       const parser = new AsyncapiParser.Parser();
       const data = [];
       for (const [name, asyncapiUrl] of Object.entries(apps)) {
-        const {document} = await AsyncapiParser.fromURL(parser, asyncapiUrl);
+        const result = fromURL(parser, asyncapiUrl);
+        const {document} = await result.parse();
         data.push({ parsedDoc: document, name });
       }
       setAsyncapiDocuments(data);

diff --git a/examples/simple-react/src/gamingapi/application.tsx b/examples/simple-react/src/gamingapi/application.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { ApplicationFocusView } from '@asyncapi/edavisualiser';
+import { ApplicationFocusView, fromURL } from '@asyncapi/edavisualiser';
 import { apps } from './apps';
 import '@asyncapi/edavisualiser/styles/default.css';
 const AsyncapiParser = require('@asyncapi/parser/browser');
@@ -15,16 +15,14 @@ function Asyncapi() {
       const data = [];
       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 result = AsyncapiParser.fromURL(parser, asyncapiUrl);
-          const {document} = await result.parse();
           if(document === undefined) {
             return;
           }
           setFocusedApplication({ parsedDoc: document, name });
         } else {
-          const result = AsyncapiParser.fromURL(parser, asyncapiUrl);
-          const {document} = await result.parse();
           data.push({ parsedDoc: document, name });
         }
       }

diff --git a/examples/simple-react/types/asyncapi.d.ts b/examples/simple-react/types/asyncapi.d.ts
@@ -0,0 +1 @@
+declare module '@asyncapi/parser/browser/index';
diff --git a/library/package-lock.json b/library/package-lock.json
diff --git a/library/package.json b/library/package.json
@@ -67,6 +67,7 @@
     "@types/jsdom": "^16.2.14",
     "@types/marked": "^4.0.1",
     "@types/node": "^12.7.2",
+    "@types/node-fetch": "^2.6.11",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.8.0",
     "@types/react-test-renderer": "^17.0.1",

diff --git a/library/src/helpers/AsyncAPIParserHelper.ts b/library/src/helpers/AsyncAPIParserHelper.ts
@@ -0,0 +1,52 @@
+import {
+  Parser,
+  ParseOptions,
+  ParseOutput,
+  ValidateOptions,
+  Input,
+  Diagnostic,
+} from '@asyncapi/parser';
+
+/**
+ * Functionality taken from the AsyncAPI parser
+ */
+
+export interface FromResult {
+  parse: (options?: ParseOptions) => Promise<ParseOutput>;
+  validate: (options?: ValidateOptions) => Promise<Diagnostic[]>;
+}
+
+export function fromURL(
+  parser: Parser,
+  source: string,
+  options?: RequestInit,
+): FromResult {
+  async function fetchUrl(): Promise<Input> {
+    const fetchFn = await getFetch();
+    return (await fetchFn(source, options as any)).text();
+  }
+
+  return {
+    async parse(options: ParseOptions = {}) {
+      const schema = await fetchUrl();
+      return parser.parse(schema, { ...options, source });
+    },
+    async validate(options: ValidateOptions = {}) {
+      const schema = await fetchUrl();
+      return parser.validate(schema, { ...options, source });
+    },
+  };
+}
+
+let __fetchFn: typeof fetch | undefined;
+async function getFetch(): Promise<typeof fetch> {
+  if (__fetchFn) {
+    return __fetchFn;
+  }
+
+  if (typeof fetch === 'undefined') {
+    return (__fetchFn = ((await import('node-fetch'))
+      .default as unknown) as typeof fetch);
+  }
+  return (__fetchFn = fetch);
+}
diff --git a/library/src/index.ts b/library/src/index.ts
@@ -7,6 +7,7 @@ export * from './components/nodes/Outgoing';
 export * from './components/nodes/AsyncAPIApplication';
 export * from './components/layouts';
 export * from './types';
+export * from './helpers/AsyncAPIParserHelper';
 
 import {
   ApplicationView,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		declare module '@asyncapi/parser/browser/index';