Merge branch 'master' into feature/integrate_visualizer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asyncapi/studio",
-  "version": "0.14.3",
+  "version": "0.14.5",
   "description": "One place that allows you to develop an AsyncAPI document, validate it, convert it to the latest version, preview the documentation and visualize the events flow.",
   "license": "Apache-2.0",
   "bugs": {
@@ -31,7 +31,7 @@
     "@asyncapi/openapi-schema-parser": "^2.0.1",
     "@asyncapi/parser": "^2.0.0-next-major.10",
     "@asyncapi/react-component": "^1.0.0-next.44",
-    "@asyncapi/specs": "^4.0.0",
+    "@asyncapi/specs": "^4.0.1",
     "@headlessui/react": "^1.7.4",
     "@hookstate/core": "^4.0.0-rc21",
     "@monaco-editor/react": "^4.4.6",
@@ -78,7 +78,7 @@
     ]
   },
   "devDependencies": {
-    "@asyncapi/dotnet-nats-template": "^0.10.0",
+    "@asyncapi/dotnet-nats-template": "^0.11.0",
     "@asyncapi/go-watermill-template": "^0.2.11",
     "@asyncapi/html-template": "^0.28.1",
     "@asyncapi/java-spring-cloud-stream-template": "^0.13.4",
@@ -88,7 +88,7 @@
     "@asyncapi/nodejs-template": "^0.13.1",
     "@asyncapi/nodejs-ws-template": "^0.9.25",
     "@asyncapi/python-paho-template": "^0.2.13",
-    "@asyncapi/ts-nats-template": "^0.10.0",
+    "@asyncapi/ts-nats-template": "^0.10.1",
     "@craco/craco": "^7.0.0",
     "@semantic-release-plus/docker": "^3.1.2",
     "@semantic-release/commit-analyzer": "^9.0.2",

src/components/Editor/EditorSidebar.tsx

@@ -13,11 +13,11 @@ export const EditorSidebar: React.FunctionComponent<EditorSidebarProps> = () =>
   let documentFromText = '';
   if (documentFrom === 'localStorage') {
     documentFromText = 'From localStorage';
-  } else if (documentFrom === 'Base64') {
+  } else if (documentFrom === 'base64') {
     documentFromText = 'From Base64';
   } else {
-    const splittedText = documentFrom.split(' ');
-    documentFromText = `From ${splittedText[1]}`;
+    const documentSource = editorState.documentSource.get();
+    documentFromText = `From URL ${documentSource}`;
   }
 
   return (

src/components/Editor/MonacoWrapper.tsx

@@ -42,7 +42,9 @@ export const MonacoWrapper: React.FunctionComponent<MonacoWrapperProps> = ({
 
   const onChange = debounce((v: string) => {
     EditorService.updateState({ content: v });
-    autoSaving && EditorService.saveToLocalStorage(v, false);
+    if (autoSaving) {
+      autoSaving && EditorService.saveToLocalStorage(v, false);
+    }
     SpecificationService.parseSpec(v);
   }, savingDelay);
 

src/services/editor.service.tsx

@@ -94,9 +94,13 @@ export class EditorService {
     if (url) {
       return fetch(url)
         .then(res => res.text())
-        .then(text => {
-          state.editor.documentFrom.set(`URL: ${url}` as any);
+        .then(async text => {
+          state.editor.merge({
+            documentFrom: 'url',
+            documentSource: url,
+          });
           this.updateState({ content: text, updateModel: true });
+          await SpecificationService.parseSpec(text, { source: url });
         })
         .catch(err => {
           console.error(err);
@@ -125,7 +129,10 @@ export class EditorService {
   static async importBase64(content: string) {
     try {
       const decoded = FormatService.decodeBase64(content);
-      state.editor.documentFrom.set('Base64');
+      state.editor.merge({
+        documentFrom: 'base64',
+        documentSource: undefined,
+      });
       this.updateState({ content: String(decoded), updateModel: true });
     } catch (err) {
       console.error(err);
@@ -178,6 +185,7 @@ export class EditorService {
     localStorage.setItem('document', editorValue);
     state.editor.merge({
       documentFrom: 'localStorage',
+      documentSource: undefined,
       modified: false,
     });
 

src/services/specification.service.ts

@@ -12,7 +12,7 @@ import { MonacoService } from './monaco.service';
 import state from '../state';
 
 import type { ConvertVersion } from '@asyncapi/converter';
-import type { OldAsyncAPIDocument as AsyncAPIDocument, Diagnostic } from '@asyncapi/parser/cjs';
+import type { OldAsyncAPIDocument as AsyncAPIDocument, Diagnostic, ParseOptions } from '@asyncapi/parser/cjs';
 import type { SpecVersions } from '../types';
 
 const parser = new Parser({
@@ -34,12 +34,24 @@ export class SpecificationService {
     return window.ParsedExtras || null;
   }
 
-  static async parseSpec(rawSpec: string): Promise<AsyncAPIDocument | void> {
+  static async parseSpec(rawSpec: string, options: ParseOptions = {}): Promise<AsyncAPIDocument | void> {
+    const source = state.editor.documentSource.get();
+    if (source) {
+      options.source = source;
+    }
+
     let diagnostics: Diagnostic[] = [];
 
     try {
-      const { document, diagnostics: validationDiagnostics, extras } = await parser.parse(rawSpec);
-      diagnostics = validationDiagnostics;
+      const { document, diagnostics: validationDiagnostics, extras } = await parser.parse(rawSpec, options);
+
+      // map messages of invalid ref to file
+      diagnostics = validationDiagnostics.map(d => {
+        if (d.code === 'invalid-ref' && d.message.endsWith('readFile is not a function')) {
+          d.message = 'File references are not yet supported in Studio';
+        }
+        return d;
+      });
 
       if (document) {
         const oldDocument = convertToOldAPI(document);

src/state/editor.ts

@@ -166,7 +166,7 @@ components:
           clientId: my-app-id
 `;
 
-export type EditorStateDocumentFrom = 'localStorage' | `URL: ${string}` | 'Base64';
+export type EditorStateDocumentFrom = 'localStorage' | 'url' | 'base64';
 
 export interface EditorState {
   height: string;
@@ -176,6 +176,7 @@ export interface EditorState {
   monacoLoaded: boolean;
   editorLoaded: boolean;
   documentFrom: EditorStateDocumentFrom;
+  documentSource?: string;
   decorations: Array<any>;
   modified: boolean,
 }